jQuery UI Sortable

The jQuery UI is a library provided by jQuery for a better user interface. So here I am describing the use of the jQuery sortable feature.

Using sortable we can reorder the DOM elements in the defined area. Users have to click on the item and drag that item to a new place. The other items will be automatically arranged. accordingly.

Use the following procedure to enable sortable elements:

1. Include the jQuery js file.
   
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>
    
2. Include the jQuery UI js file.
    

   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>  

3. Include the jQuery UI CSS.
   
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />  
     
4. Apply the sortable method to the Element.
    

   $("#technology").sortable();

   //Code

   1. Add Reference

   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>

   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>  

   <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/blitzer/jquery-ui.css" rel="stylesheet"  type="text/css" />  

   2. HTML Element

   <ul id="technology">

             <li>1. ASP.NET</li>

             <li>2. MVC</li>

             <li>3. WCF</li>

             <li>4. Web API</li>

             <li>5. SignalR</li>

   </ul>

   3. Apply sortable property

   <script>

           $(function () {

               $("#technology").sortable();

           });

    </script>

How to get the current Order of Sortable Elements

So now we can get the current order of Elements by passing the toArray parameter to the Sortable function.

$("#technology").sortable('toArray').toString();

This will return the comma separated string of IDs of elements.