Drag and Drop Using jquery

Question

I have two lists based on jquery, sample here. I need exactly the same functionality, but with slight modifications, for example:

as per the above, when I click Get items , I get all the values ​​of the sorted items, but what I want is to drag from list A and put them in list B and vice versa if I click on the items I should get only the items to be sorted in list B are not from list A.

how to do this, can we customize the above jquery lib or are there any others, even if they are in a java script, this is normal for me.

Please, help.

Answer 1

In the past, I did something similar, here is how I achieved it: http://jsfiddle.net/dazefs/vGYVX/

 <div style="background-color:Gray"> <ul id="sortable"> <li> <span style="background-color:yellow"> Item 1 </span> </li> <li> <span style="background-color:red"> Item 2 </span> </li> <li> <span style="background-color:green"> Item 3 </span> </li> <li> <span style="background-color:Blue"> Item 4 </span> </li> </ul> <ul id="sortable2" style="width:60%"> <li> <span style="background-color:yellow"> Item 5 </span> </li> <li> <span style="background-color:red"> Item 6 </span> </li> <li> <span style="background-color:green"> Item 7 </span> </li> <li> <span style="background-color:Blue"> Item 8 </span> </li> </ul> </div> 

 $(function () { $("#sortable, #sortable2").sortable({ connectWith: "#sortable2, #sortable", receive: function (event, ui) { alert('item has been sorted'); } }); //}) }); 

Reach with 3 tile groups:

http://jsfiddle.net/dazefs/XRdz6/

http://jsfiddle.net/dazefs/vGYVX/

You will have to modify this implementation a bit to enable getting items after clicking "GetItems".