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:
-
jquery-1.3.2.js
-
ui.core.js
-
ui.sortable.js
-
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:
-
placeholder: When we drag a element to new location, other items adjust space to accommodate new element by showing white space. This option helps us to style the whit space with a css class.
-
items: Specifies items that can be sorted inside the group. In above sample, items having sort property as true are sortable only.
-
connectWith: Allows to drag items from one sortable region to other.
-
dropOnEmpty: If false, items can't be dropped to an empty sortable region.
-
start: This event is triggered when sorting starts. Similarly, stop event is triggered after sorting is stopped. sort event will be fired during sorting as shown below:
<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.