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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
        integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" 
        crossorigin="anonymous">
</script>

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>
</ul>

$('ul.sortable').multisortable();

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.

$('ul.sortable').multisortable({

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