var clone; var before; var parent; $("#dropTarget ul").sortable({ connectWith: "#dropTarget ul", revert: true, helper: "clone" }); $("#sourceList ul").sortable({ connectWith: '#dropTarget ul', revert: true, helper: "clone", start: function(event, ui) { // Clone the item being dragged $(ui.item).show(); clone = $(ui.item).clone(); before = $(ui.item).prev(); parent = $(ui.item).parent(); }, stop: function(event, ui) { // Insert the clone of item being dragged back into the source list if (before.length === 0) { parent.prepend(clone); } else { before.after(clone); } }, remove: function(event, ui) { // Insert the clone of item being dragged back into the source list if (before.length == 0) { parent.prepend(clone); } else { before.after(clone); } } });
<div id="dropTarget"> <ul> <li>Drag items to my list</li> </ul> </div> <div id="sourceList"> <ul> <li>Item 1</li> <li>Item 2<ul></ul></li> <li>Item 3</li> </ul> </div>
#dropTarget { border: 1px solid #ff0000; margin-bottom: 20px; } #sourceList { border: 1px solid #00ff00; }