JQuery UI Sortable

Last article covered how to select elements on webpage via JQuery UI selectable(). In this article we shall see how to sort html elements using JQuery UI Sortable method. The sortable() method allows user to click any element and sort it by placing it at any position among the list of sortable elements.The rest of the sort-able elements adjust their positions accordingly. Simply call sortable() function with or without optional parameters on any element which you want to make sort-able. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Sortable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).sortable();
         });
      </script>
    <style>
      
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Sort the fruits by clicking and dragging</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

The above contains a list of 5 fruits which you can select by simply clicking on it. To sort the element,simply click and place it on the position of other element. For instance click the first fruit, drag it and place it at the position of third fruit in the list, you will see the 3rd and 2nd fruit moving to 2nd and first positions respectively. If you look at the script you will see that the selectable() function is called on the element with id ‘#list’. The “ol” list has this id. This means that all the elements inside this list will become sortable as well.

Sortable with Optional Parameters

You can also pass optional parameters to the sortable() function to change the behavior of the sorting of the elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of distance with value 50 is passed to the sortable() function. To start dragging the element in order to sort it user will first have to click the element and drag the mouse 50 pixel in any direction.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Sortable with Optional Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).sortable({
                distance: 50
            });
         });
      </script>
    <style>
      
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Sort the fruits by clicking and dragging</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

<<< JQuery UI SelectableJQuery UI Accordion >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .