In previous article, we looked into selectable interaction. In this article, we will cover sortable interaction. This interaction will allows us to sort a group of DOM elements. We can drag an element in the sortable group to new location and other elements will get auto adjust to fit in the group. Sortable items share properties of draggable. We can define callbacks on element's sorting start, in progress and stop. Below script explains basic sorting feature:

<html>
<head>
<title>jQuery UI Sortable - Basic</title>
 <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="ui.core.js"></script>
 <script type="text/javascript" src="ui.sortable.js"></script>
 <style type="text/css">

.highlight
 {
height: 1.5em;
line-height: 1.2em;
background-color: Aqua;
}
</style>

 <script type="text/javascript">
 $(function() {
$("#sortable,#otherSortable").sortable({
placeholder: 'highlight', items: 'div[sort*="true"]', connectWith: '.sort'
 });
}); </script>

</head>
<body>
<div id="sortable" class="sort" style="border-width: thick; margin-bottom: 5px; float: left;
width: 120px;">
 <div class="ui-state-default" sort="true" style="color: White">
 Element 1 Sortable</div>
 <div class="ui-state-default">
 Element 2</div>
 <div class="ui-state-default" sort="true" style="color: White">
 Element 3 Sortable</div>
 <div class="ui-state-default">
 Element 4</div>
 <div class="ui-state-default" sort="true" style="color: White">
 Element 5 Sortable</div>
 <div class="ui-state-default">
 Element 6</div>
 </div>
 <div id="otherSortable" class="sort" style="border-width: thick; margin-bottom: 5px;
float: left; width: 120px;">
 <div class="ui-state-default" sort="true" style="color: White">
 Element 1 Sortable</div>
 <div class="ui-state-default">
 Element 2</div>
 <div class="ui-state-default" sort="true" style="color: White">
 Element 3 Sortable</div>
 <div class="ui-state-default">
 Element 4</div>
 <div class="ui-state-default" sort="true" style="color: White">
 Element 5 Sortable</div>
 <div class="ui-state-default">
 Element 6</div>
 </div>
</body>
</html>

We need below files to implement sorting:

  1. jquery-1.3.2.js
  2. ui.core.js
  3. ui.sortable.js
  4. jquery-ui-1.7.2.custom.css taken from 'sunny' theme.

In above script, we specified two regions as sortable by calling sortable() function on those divs. Options like delay, distance, containment etc of draggable interaction are available in sortable also. We can specify below options in sortable() function:

<script type="text/javascript">
 $(function() {
$("#sortable,#otherSortable").sortable({
placeholder: 'highlight', items: 'div[sort*="true"]', connectWith: '.sort', start:function(event,ui){$('#sortable').append("Sorting started");},
sort:function(event,ui){$('#sortable').append("Sorting in progress");}, stop:function(event,ui){$('#sortable').append("Sorting completed");}
});
});
</script>

For complete list of methods, events in Sortable API, refer: http://jqueryui.com/demos/sortable/. I am ending the things here. I am attaching the source code with it. In coming articles, we will cover effects provided by JQuery UI in depth. I hope this article will be helpful for all.