JQuery UI - Append Draggable to Droppable

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 moves the items around on the screen via absolute positioning. Unfortunately, this functionality makes form submissions useless, as you cannot get the positions of the values on submission.

Thanks in advance for any items/pointers!

Answers


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


Need Your Help

Need to define an alias for a DataMapper property

properties sinatra alias datamapper padrino

I am working on a Padrino/Sinatra app that is using the jQuery UI Autocomplete in a certain section.