CODEWITHSUNDEEP
jquerydraggabledroppable
H. Ferrence
H. Ferrence

Reputation: 8116

How to keep a draggable object in its original place after drop

I have a small draggable/droppable jquery app and I am having trouble retaining the draggable item and keeping it in its original position once its clone has been dropped.

Can anyone assist?

http://jsfiddle.net/franco13/vLSZf/1/

Thank you.

$(init);

function init() {

    $('.teamEmblem').draggable({
        //    containment: $('.teamEmblem').parent(), // this does not work
        cursor: 'move',
        helper: 'clone',
        obstacle: ".teamEmblem", // this does not work
        preventCollision: true, // this does not work
        revert: true
    });

    $('.winner').droppable({
        hoverClass: 'hovered',
        tolerance: 'touch',
        drop: handleCardDrop1
    });

}

function handleCardDrop1(event, ui) {

    if (true) {
        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.draggable('option', 'revert', false);
    }

}

Upvotes: 2

Views: 2995

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could clone the draggable element and apply little style to the cloned element:

SEE DEMO

function handleCardDrop1(event, ui) {
    if (true) {

        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        $(this).droppable('disable');

        var dragged = ui.draggable.clone(true);
        dragged.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        }).css({
            position: 'absolute',
            display: 'block',
            margin: '0 auto'
        });
        ui.draggable.draggable('option', 'revert', false);
        $('body').append(dragged);
    }

}

Upvotes: 4

Related Questions