CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
m0onio
m0onio

Reputation: 213

JQuery - Duplicating drag and drop object

When I drag my proposed item the clone helper is dragged and the original object is left in its place, but cannot be dragged again after. I need to be able to drag the same object twice.How can I do this?

$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: function(droppable) {
    if (droppable === false) {
        return true;
    }
    else {
        return false;
    }
}
});

 $('.drop').droppable({
     drop: function(event, ui) {
        ui.draggable.fadeOut(1000);
     }
});

$('.drag').hover(
  function() {
    $(this).stop().animate({
    opacity: "0.8"
    });
}, function() {
    $(this).stop().animate({
        opacity: "1"
    });
});

$('.drop').droppable({
    drop: function(event, ui) {
        if (ui.draggable[10, 10].id) {
            $(this).append($(ui.helper).clone().draggable());
        }
    }
});

Upvotes: 1

Views: 584

Answers (1)

Jeemusu
Jeemusu

Reputation: 10533

Here is a jsfiddle of the working code:

http://jsfiddle.net/qfywP/2/

The problem was with this line:

$(this).append($(ui.helper).clone().draggable())

You should first clone the helper, append it to the DOM, and then make it draggable:

ui.helper.clone().appendTo($(this)).draggable()

You should also be aware that your code was wrapped in an if statement if (ui.draggable[10, 10].id) {} . This wasn't returning true, and so your code was never being executed.

I also did some spring cleaning of your code, as you had some redundancies. $('.drop').droppable() was being declared twice, when you only needed it once.

Upvotes: 3

Related Questions