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:

Join the conversation! Your thoughts help the community grow.