jQuery Drag'n'drop Sorting Plugin For Bootstrap - html5sortable

File Size: 8.53 KB
Views Total: 51911
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Drag'n'drop Sorting Plugin For Bootstrap - html5sortable

html5sortable is a tiny jQuery plugin which adds draggable sorting functionality to Bootstrap framework by using native HTML5 drag and drop API. With this plugin, you can make your Bootstrap elements (list, table or grid layout) sortable with mouse drag events.

How to use it:

1. Add the jQuery html5sortable plugin to your Bootstrap project which has jQuery library installed.

<script src="jquery.sortable.js"></script>

2. Active the plugin on a Bootstrap table and customize the drag and drop handler using handle option.

$('table tbody').sortable({
  handle: 'span'
});

3. Active the plugin on a Bootstrap list group and customize the dragging placeholder using placeholderClass option.

$('.list-group-sortable').sortable({
  placeholderClass: 'list-group-item'
});

4. Specify the elements to be sortable.

$('.sortable').sortable({
  items: ':not(.disabled)'
});

5. Create connected lists using connectWith option.

$('#sortable1, #sortable2').sortable({
  connectWith: '.connected'
});

6. API methods.

// destroy the plugin
$('.sortable').sortable('destroy');

// disable the plugin
$('.sortable').sortable('disable');

// re-enable the plugin
$('.sortable').sortable('enable');

7. Event.

$('.sortable').sortable().on('sortupdate', function(e, ui) {
    //ui.item contains the current dragged element.
    //Triggered when the user stopped sorting and the DOM position has changed.
});

$('.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.
});

Changelog:

2018-10-14

  • Added horizontal sorting support

2017-09-06

  • add sortconnect event

This awesome jQuery plugin is developed by psfpro. For more Advanced Usages, please check the demo page or visit the official website.