- 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'
});
By default the events are not namespaced. Appending the namespace with help with conflicts. To change this, just overwrite the namespace:
$('.sortable').sortable({
namespace: '.h5s'
});
// then
$('.sortable').on('drop.h5s', function(){
alert('you dropped it!!');
});
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.