JQuery UI - Append Draggable to Droppable

Question

How do you append an item being dragged to a target element on drop, using jQueryUI\'s draggables/dropables? It looks like the way jQuery UI works right now is it just move

Answer 1

If I understood correctly, you want the dragged element to be detached from it's current parent and be appended to the new one, right? You can use a helper to do the dragging (so the original element is not affected) and, upon drop, detach it and append it to the target (thanks @Oleg and @Brian for improving over my original answer).

$(myDraggable).draggable({
    helper:"clone",
    containment:"document"
});

$(myDroppable).droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

​ Working example at jsFiddle