Bootstrap HTML5 Sortable jQuery Plugin Examples

How to use it?

Download it from here. Then use it like this:

<ul class="sortable">
    <li>Item 1
    <li>Item 2
    <li>Item 3
    <li>Item 4
    </ul>
    <script src="jquery.sortable.js"></script>
    <script>
    $('.sortable').sortable();
</script>
                

Use .sortable-dragging and .sortable-placeholder 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() {
    //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 create sortable lists with handles:

$('.sortable').sortable({
    handle: '.handle'
});
                

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');