drag and drop using jquery

Question

i have two lists which are based on jquery, sample is here i need exactly same functionality but with slightchanges like follows:

as per the above when i click on Get items i get all the sortable items values but what i want is drag from List A and put them to List B and vise versa, if i click on get items i should get only sortable items on List B not from List A.

how to do this, can we customise the above jquery lib or is there any other even if they are in java script it is fine for me.

Please do help.

Answer 1

I have done something similiar in the past, this 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');
         }
    });

    //})
});

To achieve with 3 tile groups:

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

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

You will have to modify this implementation slightly to incorporate getting items after "GetItems" is clicked.