Drag and Drop Items From One List to Another List Using jQuery

Introduction

In this article we learn how to drag and drop items from one list to another list. We often need to provide a UI for dragging elements from one list to another list. Consider you are developing an online shopping application in which traditionally you are using checkboxes with a gridview or any other data control to select multiple products and storing this product information in a dataset in code behind which is somewhat inconvenient for the user to have to select items manually and for dropping again uncheck the checkboxes. In this case we can make it very easy using j-query sortable to drag items from one list to another list.

In this article we will see the scenarios for dragging items form one list to another list. For doing that first you need to download the j-query UI from the j-query site.

Step1: Once you have downloaded the j-query UI, add the reference in your .aspx page head tag to the following .js and .css files.

<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="../../jquery-1.7.1.js"></script>        
<script src="../../ui/jquery.ui.core.js"></script>  
<script src="../../ui/jquery.ui.widget.js"></script>        
<script src="../../ui/jquery.ui.mouse.js"></script>        
<script src="../../ui/jquery.ui.sortable.js"></script>

Step 2: Write down the style in your head tag as below.

<style>
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable4 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable5 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }         
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable4 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable5 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

Step 3: After doing so write the scripts to refer our dragable and dropable elements in the head tag like below.

$(function() {
     $("#Allproducts, #SelectedProducts" ).sortable({
                connectWith: ".connectedSortable"
     }).disableSelection();
});         

The above function states that the elements which are passed to the function are draggable and dropable on the page.

Step 4: Now create our list elements in the body like below:

<div class="demo">
   <table>
<tr>
    <td valign="top"> <ul id="Allproducts" class="connectedSortable" style="border:groove">
        <input name="DEMO" type="text" style="border:hidden; display:table-cell;" value="All Products" />
          <li class="ui-state-default">ASP.NET Book Price: 450 INR</li>
          <li class="ui-state-default">C# Book Price: 450 INR</li>
          <li class="ui-state-default">Sql Server Book Price: 450 INR</li>
          <li class="ui-state-default">VB.NET Book Price: 450 INR</li>
          <li class="ui-state-default">Jquery Tutorial Price: 450 INR</li>
          <li class="ui-state-default">MVC Tutorial Price: 450 INR</li>
          <li class="ui-state-default">Android Tutorial Price: 450 INR</li>
          <li class="ui-state-default">WCF Latest Tutorial Price: 450 INR</li>
          <li class="ui-state-default">Advanced Book On HRMS Price: 450 INR</li>
          </ul>
    </td>
    <td valign="top"><ul id="SelectedProducts" class="connectedSortable" style="border:groove">
        <input name="DEMO" type="text" style="border:hidden; display:table-cell;" value="Selected Products" />
          </ul></td>
        </tr>
   </table>
</div>

Step 5: Now run your application and drag the items from one list to another list.

Conclusion

Using simple J-query UI we can develop a very effective user interface.