JQuery UI sortable - allows you to drop parent

Question

How can I do this so that sorting the jQuery user interface, which allows drag and drop between different lists, will also be taken as resetting the parent?

See this example in JSBin for 3 lists, one of which is empty. When dragging any element of a list and dropping it onto the <div> elements that wrap lists (green), I want this element to move to the end of the contained <ul> (red). The sortable update function should also be called automatically. How?

 $('.sortable').sortable( { accept: '.sortable li', connectWith: '.sortable,.container', update: function () { alert('done with the moving'); } }); 

My attempt (not working) is to make the containing <div> inaccessible target as follows:

 $('.container').droppable( { accept: '.sortable li', drop: function(event, ui) { ui.draggable.appendTo($(this).find('ul')); } }); 

Answer 1

You can do this by cloning a helper element and then removing the original element from the DOM.

Note: you need to clear the style attribute as it has position:absolute for drag and drop, and this prevents the clone from being correctly positioned in ul . Of course, you can be more detailed in this matter and add / remove classes, etc.

 $('.container').droppable( { accept: '.sortable li', drop: function(event, ui) { ui.draggable.clone().attr("style", "").appendTo( $(this).find("ul") ); ui.draggable.remove(); } }); 

Here is an updated example of JSBin.