A group of sortable elements are reorderable drag/drop components; for example, a list, a grid of elements, or even sorting an interconnected set of elements. Table 9-4 shows the different methods available for sortable elements.
Along with the different call methods, you also have a nice long list of options available for configuration, as shown in Table 9-5. These options give you control over the sensitivity and tolerance of the sortable elements. Sortable elements can also be interconnected between two different sets.
Sortable elements are built on top of the drag-and-drop functionality, but with a bit more specific behavior.
The following example revisits the task list. Each of the individual task boxes now has a “portlet” style interface. When reordering one of the component boxes, the new position of the orderable component is highlighted with a different style. An example of the reordering in process can be seen in Figure 9-2.
<!DOCTYPE html>
<html>
<head>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css”
rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script> <style type=”text/css”>
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
}
.portlet-header {
margin: 0.3em;
padding-bottom: 4px;
padding-left: 0.2em;
}
.portlet-header .ui-icon {
float: right;
}
.portlet-content {
padding: 0.4em;
}
.ui-state-highlight {
height: 1.5em;
line-height: 1.2em;
}
</style>
<script>
$(function(){
$( “.portlet” )
.addClass( “ui-widget ui-widget-content”
+ “ui-helper-clearfix ui-corner-all” )
.find( “.portlet-header” )
.addClass( “ul-wldget-header ul-corner-all” )
.prepend( “<span class=’ul-lcon ul-lcon-mlnusthlck’></span>”)
.end()
.flnd( “.portlet-content” );
$(‘.column’).sortable({ placeholder: ” ui-state-highlight” })
});
</script>
</head>
<body>
<div class=”column”>
<div class=”portlet”>
<div class=”portlet-header”>Task 1</div>
<div class=”portlet-content”>…</div>
</div>
<div class=”portlet”>
<div class=”portlet-header”>Task 2</div>
<div class=”portlet-content”>…</div>
</div>
<div class=”portlet”>
<div class=”portlet-header”>Task 3</div>
<div class=”portlet-content”>…</div>
</div>
<div class=”portlet”>
<div class=”portlet-header”>Task 4</div>
<div class=”portlet-content”>…</div>
</div>
</div>
</body>
</html>
Code snippet is from sortable.txt
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc