jQueryUI Sortable

jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the mouse. The sorting ability of this method is based on an operation string passed as the first parameter.

Syntax:

You can use the sortable () method in two forms:

First Method

The sortable (options) method specifies that an HTML element contains interchangeable elements. Here the options parameter specifies the behavior of the elements involved during the process of reordering.

Syntax:

Following is a list of different options that can be used with this method:

Option	Description
appendto	This option specifies the element in which the new element created with options.helper will be inserted during the time of the move/drag. By default its value is parent.
axis	This option indicates an axis of movement ("x" is horizontal, "y" is vertical). By default its value is false.
cancel	This option is used to prevent sorting of elements by clicking on any of the selector elements. By default its value is "input,textarea,button,select,option".
connectwith	This option is a selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false.
containment	This option indicates an element within which the displacement takes place. The element will be represented by a selector (only the first item in the list will be considered), a DOM element, or the string "parent" (parent element) or "window" (html page).
cursor	It specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto".
cursorat	It sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false".
delay	It specifies delay in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0".
disabled	This option if set to true, disables the sortable functionality. By default its value is false.
distance	It indicates the number of pixels that the mouse must be moved before the sorting starts. If specified, sorting will not start until after mouse is dragged beyond distance. By default its value is "1".
droponempty	If you set this option to false, then items from this sortable can't be dropped on an empty connect sortable. By default its value is true.
forcehelpersize	If you set this option to true, it forces the helper to have a size. By default its value is false.
forceplaceholdersize	This option when set to true, takes into account the size of the placeholder when an item is moved. This option is only useful if options.placeholder is initialized. By default its value is false.
grid	This option is an array [x, y] indicating the number of pixels that the sorting element moves horizontally and vertically during displacement of the mouse. By default its value is false.
handle	If specified, restricts sort from starting unless the mousedown occurs on the specified element(s). By default its value is false.
helper	It is allowed for a helper element to be used for dragging display. By default its value is original.
items	This option specifies which items inside the DOM element to be sorted. By default its value is > *.
opacity	This option is used to define the opacity of the helper while sorting. By default its value is false.
placeholder	This option is used to class name that gets applied to the otherwise white space. By default its value is false.
revert	This option decides whether the sortable items should revert to their new positions using a smooth animation. By default its value is false.
scroll	This option is used to enable scrolling. If you set this option to true the page scrolls when coming to an edge. By default its value is true.
scrollsenstivity	This option indicates how many pixels the mouse must exit the visible area to cause scrolling. By default its value is 20. This option is used only with options.scroll set to true.
scrollspeed	This option indicates the scrolling speed of the display once the scrolling begins. By default its value is 20.
tolerance	This option is a string that specifies which mode to use for testing whether the item being moved is hovering over another item. By default its value is "intersect".
zIndex	This option represents z-Index for element/helper while being sorted. By default its value is 1000.

jQuery UI Sortable Example 1

Let's take a simple example to demonstrate the sortable functionality, passing no parameters to the sortable() method.

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-1 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: #333333;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-1" ).sortable();
      });
   </script>
</head>
<body>
<h1> Courses Available at trainingtrains</h1>
   <ul id="sortable-1">
      <li class="default">Java/J2EE</li>
      <li class="default">.NET</li>
      <li class="default">SQL</li>
      <li class="default">PHP</li>
      <li class="default">Android</li>
      <li class="default">C/C++</li>
      <li class="default">jQuery</li>
   </ul>
</body>
</html>

Test it Now

jQueryUI Sortable example 2

How to use options delay and distance:

Let's take an example to demonstrate the usage of delay and distance in jQuery UI sorting.

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: red;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-2" ).sortable({
            delay:200
         });
         $( "#sortable-3" ).sortable({
            distance:50
         });
      });
   </script>
</head>
<body>
   <h3>Delay by 500ms</h3>
   <ul id="sortable-2">
      <li class="default">Java</li>
      <li class="default">SQL</li>
      <li class="default">.NET</li></li>
      <li class="default">Oracle</li>
   </ul>
   <h3>Distance Delay by 50px</h3>
   <ul id="sortable-3">
      <li class="default">Java</li>
      <li class="default">SQL</li>
      <li class="default">.NET</li>
      <li class="default">Oracle</li>
   </ul>
</body>
</html>

Test it Now

jQueryUI Sortable example 3

How to use a Placeholder:

Let's take an example to demonstrate the use of Placeholder in the sort() function of jQuery UI.

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-4 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .highlight {
         border: 1px solid red;
         font-weight: bold;
         font-size: 45px;
         background-color: blue;
      }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: red;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-4" ).sortable({
          placeholder: "highlight"
         });
      });
   </script>
</head>
<body>
<h1>Courses available at trainingtrains</h1>
   <ul id="sortable-4">
      <li class="default">Java</li>
      <li class="default">.NET</li>
      <li class="default">Android</li>
      <li class="default">PHP</li>
      <li class="default">C/C++</li>
      <li class="default">Spring</li>
      <li class="default">Hibernate</li>
   </ul>
</body>
</html>

Test it Now

jQueryUI Sortable example 4

How to use options connectWith and dropOnEmpty:

This example specifies how to use connectWith and dropOnEmpty options in the sort function of jQueryUI.

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-5, #sortable-6,#sortable-7 { 
         list-style-type: none; margin: 0; padding: 0;
         width: 20%;float:left }
      #sortable-5 li, #sortable-6 li,#sortable-7 li { 
         margin: 0 3px 3px 3px; padding: 0.4em; 
      padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: #333333;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-5, #sortable-6" ).sortable({
            connectWith: "#sortable-5, #sortable-6"
         });
         $( "#sortable-7").sortable({
            connectWith: "#sortable-5",
            dropOnEmpty: false
         });

      });
   </script>
</head>
<body>
   <ul id="sortable-5"><h3>Pool A</h3>
      <li class="default">India</li>
      <li class="default">Australia</li>
      <li class="default">Bangla Desh</li>
      <li class="default">Kenya</li>
   </ul>
   <ul id="sortable-6"><h3>Pool B</h3>
      <li class="default">Pakistan</li>
      <li class="default">Sri Lanka</li>
      <li class="default">West Indies</li>
      <li class="default">Canada</li>
   </ul>
   <ul id="sortable-7"><h3>PoolC</h3>
      <li class="default">South Africa</li>
      <li class="default">England</li>
      <li class="default">Zimbambe</li>
      <li class="default">UAE</li>
   </ul>
</body>
</html>

Test it Now

Second Method

The sortable (action, params) method is used to perform an action on the sortable elements such as to prevent displacement. Here action is specified as a string in the first argument and optionally you can add one or more params based on the given action.

Syntax:

Following is a list of actions used in this method:

Action	Description
cancel()	This action is used to cancel the current sort operation. This is most useful within handlers for the sort receive and sort stop events. This method does not accept any arguments.
destroy()	This action is used to remove the sortability functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable()	This action is used to disable the sortability of any sortable elements in the wrapped set. It only disables the sortability of the elements not removed and it can be restored by calling the enable variant of this method. This method does not accept any arguments.
enable()	This action is used to re-enable the sortability on any sortable elements in the wrapped set whose sortability has been disabled. You should note that this method won?t add sortability to any non-sortable elements. This method does not accept any arguments.
option(optionName)	This action is used to get the value currently associated with the specified optionname. Here optionname is the name of the option to get.
option()	It is used to get an object containing key/value pairs representing the current sortable options hash. This method does not accept any arguments.
option(optionName, value)	This action is used to set the value of the sortable option associated with the specified optionname. Here optionname is the name of the option to set and value is the value to set for the option.
option(options)	It sets one or more options for the sortable. Here options is a map of option-value pairs to set.
refresh()	this action is used to refresh the list of items if necessary. This method does not accept any arguments. If you call this method then it will be added to the sortable to be recognized.
toArray(options)	This method is used to return an array of the id values of the sortable elements in sorted order. This method takes options as parameter, to customize the serialization or sorted order.
serialize(options)	This method returns a serialized query string (submittable via ajax) formed from the sortable.
refreshPositions()	This method is used mostly internally to refresh the cached information of the sortable. This method does not accept any arguments.
widget()	This method returns a jquery object containing the sortable element. This method does not accept any arguments.

jQueryUI Sortable example 5

Let's take an example to demonstrate the use of above actions.

The following example shows the use of toArray (options) method:

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-8{ list-style-type: none; margin: 0; 
         padding: 0; width: 25%; float:left;}
      #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: #333333;
      }
   </style>
   <script>
      $(function() {
         $('#sortable-8').sortable({
            update: function(event, ui) {
               var productOrder = $(this).sortable('toArray').toString();
               $("#sortable-9").text (productOrder);
            }
         });
      });
   </script>
</head>
<body>
   <ul id="sortable-8">
      <li id="1" class="default">Java</li>
      <li id="2" class="default">SQL</li>
      <li id="3" class="default">PHP</li>
      <li id="4" class="default">.NET</li>
   </ul>
   <br>
   <h3><span id="sortable-9"></span></h3>
</body>
</html>

Test it Now

Event Management with the jQueryUI sortable elements

jQueryUI sortable method facilitates event methods to get triggered for a particular event. Following is the list of these event methods.

event method	description
activate(event, ui)	this event is triggered on the sortable when a sort operation starts on connected sortable.
beforestop(event, ui)	this event is triggered when the sort operation is about to end, with the helper and placeholder element reference still valid.
change(event, ui)	this event is triggered when the sorted element changes position within the dom.
create (event, ui)	this event is triggered when the sortable is created.
deactivate (event, ui)	this event is triggered when a connected sort stops, propagated to the connected sortable.
out(event, ui)	this event is triggered when the sort item is moved away from a connected list.
over(event, ui)	this event is triggered when a sort item moves into a connected list.
recieve(event, ui)	this event is triggered when a connected list has received a sort item from another list.
remove(event, ui)	this event is triggered when the sort item is removed from a connected list and is dragged into another.
sort(event,ui)	this event is repeatedly triggered for mousemove events during a sort operation.
start(event,ui)	this event is triggered when a sort operation starts.
stop(event,ui)	this event is triggered when a sort operation has concluded.
update(event, ui)	this event is triggered when a sort operation stops and the position of the item has been changed.

jQueryUI Sortable example 6

Let's take an example to demonstrate the use of event receive, start and stop during drop functionality.

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-10, #sortable-11 { list-style-type: none; 
         margin: 0; padding: 0; width: 80%; }
      #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
         padding: 0.4em; padding-left: 1.5em; 
         font-size: 17px; height: 16px; }
      .highlight {
         border: 1px solid #000000;
         font-weight: bold;
         font-size: 45px;
         background-color: lightgreen;
      }
      .default {
         background: #cedc98;
         border: 1px solid #DDDDDD;
         color: red;
         }
      .wrap{
         display: table-row-group;
         }
      .wrap1{
         float:left;
         width: 200px;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-10" ).sortable({
            start: function (event, ui) {
               $("span#result").html ($("span#result").html () 
                  + "<b>start</b><br>");
            },
            receive : function (event, ui)
            {
               $("span#result").html ($("span#result").html () 
                  + ", receive");
            },
            stop: function (event, ui) {
               $("span#result").html ($("span#result").html () 
                  + "<b>stop</b><br>");
            }
         });
         $( "#sortable-11" ).sortable({
            connectWith : "#sortable-10, #sortable-11"
         });
      });
   </script>
</head>
<body>
   <div class="wrap">
      <div class="wrap1"> 
         <h3>Pool A</h3>
         <ul id="sortable-10">
            <li class="default">India</li>
            <li class="default">Australia</li>
            <li class="default">Bangladesh</li>
            <li class="default">Sri Lanka</li>
         </ul>
      </div>
      <div class="wrap1">
         <h3>Popularity</h3> 
         <ul id="sortable-11">
            <li class="default">89%</li>
            <li class="default">87%</li>
            <li class="default">61%</li>
            <li class="default">78%</li>
         </ul>
      </div>
   </div>
   <hr />
   <span id=result></span>
</body>
</html>

Test it Now

Next TopicjQuery UI Accordion

← prev next →