Multi Sortable Plugin For jQuery UI

File Size: 6.86 KB
Views Total: 5889
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi Sortable Plugin For jQuery UI

multiSortable is a jQuery extension for the jQuery UI sortable widget that enables users to reorder multiple items (e.g. nested list items) in a list using drag and drop.

How to use it:

1. Insert the necessay jQuery and jQuery UI libraries into the html file.

<script src="" 
<script src="" 

2. Download and put the jQuery multiSortable plugin after jQuery.

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

3. Enable the plugin on the list and done.

<ul id="list-demo" class="sortable">
  <li>Item 11</li>
  <li>Item 12</li>
    <li class="child">Item 12a</li>
    <li class="child">Item 12b</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>

4. The plugin also supports the connectWith option which enables user to resort multiple items across multiple lists.

$('ul#list-demo').sortable('option', 'connectWith', '#anotherList');

5. All default options for the jQuery multiSortable plugin.


  // callbacks
  click: function(event, elem) {},
  mousedown: function(event, elem) {},

  // CSS class when selected
  selectedClass: 'selected',

  // item selector
  items: 'li'

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