JQuery UI: moving items from one list to another

Question

Although this should be relatively simple, I cannot figure out how to move (rather than copy) LI elements between UL s.

All I want to do is drag any item from the foo list to the list pane (or vice versa) without duplicating the item.

While connectToSortable does almost what I want (although I would prefer to avoid sortable ), it clones the element - and manually deleting the original element by responding to the stop event is not so easy (for example, to make sure that the crash really happened) .

A simple hello world example helped me a lot.

Answer 1

An example of Hello World can be found here: http://jqueryui.com/demos/sortable/#connect-lists . You don't need draggable at all, just sortable .

 $(function() { $("#sortable1, #sortable2").sortable({ connectWith: '.connectedSortable' }).disableSelection(); }); 

If you want to prevent sorting of items in one list, this may be the way. This is not the most beautiful user interface, although (the user is given a false hope), and the user can also freely determine the drag position in someone else's list.

 $(function() { var sender; var recvok = false; $("#sortable1, #sortable2").sortable({ connectWith: '.connectedSortable', start: function() { sender = $(this); recvok = false; }, over: function() { recvok = ($(this).not(sender).length != 0); }, stop: function() { if (!recvok) $(this).sortable('cancel'); } }).disableSelection(); }); 

This is a really terrible feature, working on what I feel is incompleteness in the jQuery user interface. It saves the sender on sortstart and removes the flag allowing to refuse. When another receiver is entered, it checks to see if it is a sender and sets a flag. The flag is checked on sortstop. Warning: this function is ugly for the user and the programmer, but it works.