JarCastingBootstrap HTML5 Sortable jQuery Plugin
Features
- Less than 1KB (minified and gzipped).
- Built using native HTML5 drag and drop API.
- Supports both list and grid style layouts.
- Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.
Usage
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 placeholderClass option to create sortable lists with additional class for placeholder:
$('.sortable').sortable({
placeholderClass: 'customPlaceholderClass'
});
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'
});
Use sortconnect event if you want to do something when an item is moved between connected lists:
$('.sortable').sortable().bind('sortconnect', function(e, ui) {
//ui.item contains the current dragged element.
//Triggered when the user stopped sorting and the item is moved between connected lists.
});
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');
License
Released under the MIT license.