Question

I’ve got a problem with Drag & Drop in jQuery. In my code there is a draggable div. When I move it to a certain droppable table cell, a clone of the div is appended to the table cell. But when I drag the clone, the original div is moved instead. This here is the function called on drop:

function(event, ui)
{
    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell
}

I couldn’t find a clear answer by Googling. I don’t know if it’s got anything to do with this, but the div has a relative position (and needs to stay that way).

How do I make sure the clone can be dragged just like its original?

Answer 1

This is how I would do it, this should do the trick.

 $(".draggable").draggable({ helper: 'clone' });
 $(".droppable").droppable({
    drop: function (event, ui) {
       ui.draggable.clone().appendTo($(this)).draggable();
    }
 });

I don’t know if you did, but do not use id-s on the draggable, cause those are going to be cloned too. Also, you have to append the element before applying the draggable on it.