- Less than 1KB (minified and gzipped).
- Built using native HTML5 drag and drop API.
- Supports both list and grid style layouts.
- Similar API and behaviour to jquery-ui sortable plugin.
- Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.
Use sortable method to create a sortable list:
$('.sortable').sortable();Use .sortable-dragging and .sortable-placeholder CSS selectors to change the styles of a dragging item and its placeholder respectively.
Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):
$('.sortable').sortable().bind('sortupdate', function(e, ui) {
//ui.item contains the current dragged element.
//Triggered when the user stopped sorting and the DOM position has changed.
});Use items option to specifiy which items inside the element should be sortable:
$('.sortable').sortable({
items: ':not(.disabled)'
});Use handle option to restrict drag start to the specified element:
$('.sortable').sortable({
handle: 'h2'
});Setting forcePlaceholderSize option to true, forces the placeholder to have a height:
$('.sortable').sortable({
forcePlaceholderSize: true
});Use connectWith option to create connected lists:
$('#sortable1, #sortable2').sortable({
connectWith: '.connected'
});To remove the sortable functionality completely:
$('.sortable').sortable('destroy');To disable the sortable temporarily:
$('.sortable').sortable('disable');To enable a disabled sortable:
$('.sortable').sortable('enable');The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:
yepnope({
test: Modernizr.draganddrop,
yep: 'jquery.sortable.js',
nope: 'jquery-ui.min.js',
complete: function() {
$('.sortable').sortable().bind('sortupdate', function(e, ui) {
//Store the new order.
}
}
});Released under the MIT license.