Geek Answers Handbook

Drag and drop LI from UL A to UL B and remove from UL A?

I have two lists, and the second one is sortable , and I can drag from the first list to the second list, but I cannot figure out how to remove it from the first list.

The ( li ) element is deleted if I delete helper: "clone" , but then the drag and drop action does not work well (jerky around, not smooth). A.

(Bonus points - also remove left UL when empty)

enter image description here

Fiddle: http://jsfiddle.net/Nme9a/

 <html> <head> <style> #categorizer { padding: 2px; } #list_to_process, #categories { color: blue; background-color: green; border: solid; border-width: 4px } ul { padding: 10px; margin: 50px; float:left; list-style:none; } li { color: yellow; padding: 25px 80px; cursor: move; } li:nth-child(even) { background-color: #000 } li:nth-child(odd) { background-color: #666 } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#categories").sortable({ revert: true }); $("li.to_process").draggable( { connectToSortable: "#categories", helper: "clone", revert: "invalid" }); }); </script> </head> <body> <div id="categorizer"> <ul id="list_to_process"> <li class="to_process" id="left1">1</li> <li class="to_process" id="left2">2</li> <li class="to_process" id="left3">3</li> <li class="to_process" id="left4">4</li> </ul> <ul id="categories"> <li id="righta">a</li> <li id="rightb">b</li> <li id="rightc">c</li> <li id="rightd">d</li> <li id="righte">e</li> </ul> </div> </body> </html>
+4
source share
1 answer

You can pass the callback to the "receive" options for sortable (), for example:

  $(document).ready( function() { $("#categories").sortable({ revert: true, receive: function(evt, ui) { ui.item.remove(); } }); $("li.to_process").draggable( { connectToSortable: "#categories", revert: "invalid", helper: "clone" }); });

[EDIT from Michael]

Notice that I also added:

 $('#list_to_process li').length == 0) { $('#list_to_process').remove(); }

after ui.item.remove(); , so there is an empty UL that still had padding and borders, i.e.

enter image description here

will be deleted.

+3
source

More articles:


All Articles