JQuery user interface is used for sorting without sorting, just move

Question

Here is my fiddle: http://jsfiddle.net/MtgbM/

Here are the rules: List-A is my list of items.

• I was unable to reorder List-A
• I should not “delete” things from List-A (when they are dragged into List-B, it still remains in List-A, but the copy moves to List-B)
• I was unable to drag objects from list-A to list-A

List-B is my source

• I can remove items from list-B (drag them)
• I can reorder items in List-B

This is pretty much the case. Basically, List-A is the source, and List-B is the destination. Most of this I see, I can configure using jQuery, which I'm not sure is bullets # 1 and # 2 in List-A. How to make List-A "Unsortable" and how to make it "Clone" instead of moving an item?

Any help would be appreciated

Answer 1

You do not want everything to be possible for sorting.

The top <li> list should have draggables with helper: 'clone' , this helper parameter allows you to drag and drop <li> copies outside the list without changing the list itself. So you start with this:

 $('#list-A li').draggable({ helper: 'clone' }); 

Then you need to make the bottom list droppable and you want to clone the elements when they are deleted. You can clone using the drop event:

 $('#list-B ul').droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); 

You want to be able to move things in the bottom list and what's sortable there. So the bottom list should be sortable as well as droppable. You should also keep droppable from cloning while you only sort them. You can use the sortable start and stop events to set the data flag, and then check this flag in the droppable drop event handler. Something like this for sortable:

 $('#list-B ul').sortable({ start: function(event, ui) { ui.item.data('sorting', true); }, stop: function(event, ui) { ui.item.removeData('sorting'); } }); 

and then add validation to the drop event handler:

 $('#list-B ul').droppable({ drop: function(event, ui) { if(ui.draggable.data('sorting')) return; $(this).append($(ui.draggable).clone()); } }); 

Demo: http://jsfiddle.net/ambiguous/PyWAM/