Bootstrap 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.

psfpro/bootstrap-html5sortable

Bootstrap HTML5 Sortable jQuery Plugin

Features

Usage

License