The sortable is a flexible, sorting plugin for jQueryUI which allows rearranging the elements into a meaningful order so that we can analyze it more effectively. It enables sorting of elements by using drag and drop functionality to place the new element within the list and other elements will adjust to fit. The sortable event also enables, sorting of the elements vertically or horizontally using the mouse in a list.
also read:
The sortable method can be used in the following forms:
- $(selector, context). sortable (options)
- $(selector, context). sortable (“actions”, [params])
The following example demonstrates simple sortable technique:
<!DOCTYPE html> <head> <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 type="text/css"> #sortMe { list-style-type: none; margin: 0; padding: 0; width: 100px; } .myList { background: gray; border: 1px solid cyan; } </style> <script> $(function(){ $("#sortMe").sortable(); }); </script> </head> <title>JQueryUI Example</title> <body> <h2>Simple Sorting Example</h2> <ul id="sortMe"> <li class="myList">India</li> <li class="myList">Srilanka</li> <li class="myList">Australia</li> <li class="myList">South Africa</li> <li class="myList">China</li> <li class="myList">Japan</li> <li class="myList">Italy</li> <li class="myList">France</li> <li class="myList">Canada</li> <li class="myList">Brazil</li> </ul> </body> </html>
- The above script makes use of sortable() method to reorder the elements in a list by using the ID selector “#sortMe.
- The elements are defined within unordered list with class “.myList” defined within the li tag. The class uses different CSS styles to display the elements more effectively on the webpage.
Run JQueryUI Simple Sortable Demo
Sortable Widget Options
The sortable method contains following options:
Option | Description | Default Value |
---|---|---|
appendTo | It appends the specified element that moves with the mouse during the drag. | parent |
axis | It defines the axis which the dragged elements moves on the values such as horizontal or vertical axis. | false |
cancel | It is used to cancel the sorting operation on the specified element. | input, textarea, button, select, option |
connectWith | It connects the one list with the other list for user interaction and it is also known as one-way relationship. | false |
containment | It sorts the specified element within bounds of the region. | false |
cursor | It specifies the cursor when an element moves. | auto |
cursorAt | It specifies the offset to the mouse pointer. | false |
delay | It specifies the delay time in milliseconds when the movement of mouse is taken into account . | 0 |
disabled | It disables the sorting of elements when it is set to true i.e. it stops sorting operation. | false |
distance | It determines the displacement, the mouse must be moved before the sorting starts in the form of pixels. | 1 |
dropOnEmpty | The elements can’t be dropped on empty connect sortable if it is set to false. | true |
forceHelperSize | It tells the helper to have a size, when it is set to true. | false |
forcePlaceholderSize | When an element is moved, it defines the size of the placeholder when it is set to true. | false |
grid | It sorts the elements to grid system with x and y pixels in the form of [x,y]. | false |
handle | The handle that start the sorting operation. | original |
opacity | It provides opacity of the element when sorting. | false |
revert | It reverts the element back to its original position after completion of sorting. | false |
scroll | It enables the scrolling functionality and it scrolls the element, when it is coming to an edge. | true |
scrollSensitivity | It defines the scrolling functionality indicating how many pixels the mouse must exit the visible area to start scrolling. | 20 |
scrollSpeed | It displays the scrolling speed. | 20 |
Tolerance | It defines whether the element is being moved is hovering or not on the another element. | intersect |
zIndex | It initialize the Z-index for the helper while being sorted. | 1000 |
The following example demonstrates usage of containment option:
<!DOCTYPE html> <head> <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 type="text/css"> .mylist { background-color: orange; text-align: center; border: 2px solid green; } .myelements { list-style-type: none; margin: 0; padding: 0; } .myelements li { float: left; margin: 2px; padding: 2px; width: 60px; height: 60px; } </style> <script> $(function () { $("#element1").sortable({ containment: "#container" }); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Using Containment Option</h2> <div id="container" style="float:left;width:300px;border:1px solid red;height:250px"> <ul id="element1" class="myelements"> <li class="mylist">A</li> <li class="mylist">B</li> <li class="mylist">C</li> <li class="mylist">D</li> <li class="mylist">E</li> <li class="mylist">F</li> <li class="mylist">G</li> <li class="mylist">H</li> <li class="mylist">I</li> <li class="mylist">J</li> <li class="mylist">K</li> <li class="mylist">L</li> </ul> </div> </body> </html>
- The above script uses containment option which indicates an element within which the displacement takes place.
- The option uses ID selector “#element1” to make elements sortable. All the elements are displayed within the div element by using ID selector “#container” and containment option uses this ID selector to display the result by using CSS styles.
Run JQueryUI Sortable Options Demo
The following example shows usage of connectWith and dropOnEmpty options:
<!DOCTYPE html> <head> <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 type="text/css"> #mysort1, #mysort2,#mysort3 { list-style-type: none; margin: 0; padding: 0; width: 20%; float:left } #mysort1 li, #mysort2 li, #mysort3 li { margin: 2px; padding: 0.4em; padding-left: 3em; font-size: 20px; height: 20px; } .mylist { background-color: orange; border: 2px solid green; } </style> <script> $(function() { $( "#mysort1, #mysort2" ).sortable({ connectWith: "#mysort1, #mysort2" }); $( "#mysort3").sortable({ connectWith: "#mysort2", dropOnEmpty: false }); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Using connectWith and dropOnEmpty Options</h2> <ul id="mysort1"> <h3>Table 1</h3> <li class="mylist">A</li> <li class="mylist">B</li> <li class="mylist">C</li> <li class="mylist">D</li> </ul> <ul id="mysort2"> <h3>Table 2</h3> <li class="mylist">E</li> <li class="mylist">F</li> <li class="mylist">G</li> <li class="mylist">H</li> </ul> <ul id="mysort3"> <h3>Table 3</h3> <li class="mylist">I</li> <li class="mylist">J</li> <li class="mylist">K</li> <li class="mylist">L</li> </ul> </body> </html>
- The script makes use of sortable options such as connectWith and dropOnEmpty.
- The connectWith option identifies another sortable element which allows elements from the one list to be moved to other list.
- In the script we could see, Table 1 and Table 2 are connecting each other by using the line connectWith: “#mysort1, #mysort2” . We could move elements from Table1 to Table2 only as mentioned in the previous line.
- The dropOnEmpty option cannot drop the elements on an empty connect sortable, because it is set to false in the script. The Table3 elements are can’t be moved to Table1, because we are connecting Table3 with Table2 as shown in the script.
Run JQueryUI Sortable Options Demo1
The below example demonstrates usage of delay and distance options:
<!DOCTYPE html> <head> <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 type="text/css"> #selectMe1,#selectMe2{ list-style-type: none; margin: 0; padding: 0; width: 100px; } .myList { background: gray; border: 1px solid cyan; color:orange; } </style> <script> $(function(){ $("#selectMe1").sortable({ delay: 500 }); $("#selectMe2").sortable({ distance:30 }); }); </script> </head> <title>JQueryUI Example</title> <body> <h2>Sorts after Delay of 500ms </h2> <ul id="selectMe1"> <li class="myList">India</li> <li class="myList">Srilanka</li> <li class="myList">Australia</li> <li class="myList">South Africa</li> </ul> <h2>Sorts after the distance of 30px</h2> <ul id="selectMe2"> <li class="myList">China</li> <li class="myList">Japan</li> <li class="myList">Italy</li> <li class="myList">France</li> <li class="myList">Canada</li> <li class="myList">Brazil</li> </ul> </body> </html>
- The above script uses options such as delay and distance .
- The delay option defines the delay in milliseconds after which the first movement of the mouse is taken into account. In the script we have defined as “delay: 500”, meaning that, we can able to sort the elements after 500milliseconds.
- The distance option defines the number of pixels that the mouse must be moved before the sorting starts. In the script we have used “distance: 30”, meaning that, it sorts the elements after the distance of 30px.
Run JQueryUI Sortable Options Demo2
Sortable Widget Methods
The following table shows some of the methods which are used with sortable widget:
Method | Description |
---|---|
destroy() | It removes the sortability functionality . |
cancel() | It cancels the current sortable functionality . |
disable() | This method disables the sortable operation. |
enable() | This method enables the sortable operation. |
options() | It returns the options property. It sets sortable operation with specified option name. |
refresh | It refreshes the position and size of the sortable elements and it does not accept any arguments. |
toArray | It returns the array of item id’s into the sorted order. |
serialize | It defines serialized query string into a form submittable string. |
widget() | It defines sortable element with jQuery object. |
The following example demonstrates usage of enable and destroy methods:
<!DOCTYPE html> <head> <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 type="text/css"> #mysort2 li, #mysort3 li { margin: 2px; padding: 0.4em; padding-left: 3em; font-size: 20px; height: 20px; } #mysort2,#mysort3 { list-style-type: none; margin: 0; padding: 0; width: 20%; float:left } .mylist { background-color: orange; border: 2px solid green; } </style> <script type="text/javascript"> $(function(){ $("#mysort2").sortable(); $("#mysort2").sortable('enable'); $("#mysort3").sortable(); $("#mysort3").sortable('destroy'); }); </script> </head> <body> <h2>Using Enable and Destroy Methods</h2> <ul id="mysort2"> <h3>Enabled Sorting</h3> <li class="mylist">E</li> <li class="mylist">F</li> <li class="mylist">G</li> <li class="mylist">H</li> </ul> <ul id="mysort3"> <h3>Destroyed Sorting</h3> <li class="mylist">I</li> <li class="mylist">J</li> <li class="mylist">K</li> <li class="mylist">L</li> </ul> </body> </html>
- The script makes use of sortable methods such as enable and destroy.
- The enable method enable the sortability functionality on sortable elements in the list or set.
- The destroy method removes the sortability functionality completely. It will return the element back to its pre-init state.
Run JQueryUI Sortable Methods Demo
Sortable Widget Events
The following table shows events which are used with sortable widget:
Event | Description |
---|---|
activate(event, ui) | This event fires when the sorting operation starts on the acceptable elements. |
create(event, ui) | It fires when a sortable element is created. |
deactivate(event, ui) | It fires when a draggable element stops sorting. |
change(event, ui) | It fires when the sorted element changes the position. |
recieve(event, ui) | It fires when a sort item receives element from the other list. |
out(event, ui) | It fires when sortable element is moved out of the sorting operation. |
over(event, ui) | It fires when sortable element is sorted into the sortable list. |
start(event, ui) | It fires when sortable operation starts. |
stop(event, ui) | It fires when sortable operation ends. |
sort(event, ui) | It fires during sort operation. |
update(event, ui) | It fires when user stops sorting operation and the position of the element has been changed. |
The following example demonstrates usage of start and stop events:
<!DOCTYPE html> <head> <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 type="text/css"> <style type="text/css"> .mylist { background-color: orange; text-align: center; border: 2px solid green; } #element1 { list-style-type: none; margin: 0; padding: 0; } #element1 li { float: left; margin: 2px; padding: 2px; width: 60px; height: 60px; } .highlight { border: 2px solid red; font-weight: bold; font-size: 40px; background-color: lightblue; } </style> <script> $(function () { $("#element1").sortable({ start: function (event, ui) { ui.item.toggleClass("highlight"); }, stop: function (event, ui) { ui.item.toggleClass("highlight"); } }); }); </script> <div id="container" style="float:left;width:300px;border:1px solid red;height:250px"> <ul id="element1"> <li class="mylist">A</li> <li class="mylist">B</li> <li class="mylist">C</li> <li class="mylist">D</li> <li class="mylist">E</li> <li class="mylist">F</li> <li class="mylist">G</li> <li class="mylist">H</li> <li class="mylist">I</li> <li class="mylist">J</li> <li class="mylist">K</li> <li class="mylist">L</li> </ul> </div> </body> </html>
- The script uses sortable events called start and stop.
- The start event triggers when a sort operation starts.
- The stop event occurs when a sort operation ends.
- We have used class called highlight which toggles when we click on the element and element will be display with red color border and light blue background color.
Run JQueryUI Sortable Events Demo