Minimal Multiple Sortable Plugin For jQuery UI - multipleSortable

multipleSortable is a small jQuery plugin to extend the jQuery UI sortable widget that allows multiple DOM elements to be draggable and sortable at a time.

How to use it:

1. Load the necessary jQuery and jQuery UI libraries in your html document.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Load the minified version of the jQuery multipleSortable plugin at the bottom of the webpage.

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

3. Attach the plugin to a group of DOM elements you specify.

<div id="vertical-list">
  <ul class="v-sortable">
    <li>item1-1</li>
    <li>item1-2</li>
    <li>item1-3</li>
    ...
  </ul>
  <ul class="v-sortable">
    <li>item2-1</li>
    <li>item2-2</li>
    <li>item2-3</li>
    ...
  </ul>
  <ul class="v-sortable">
    <li>item3-1</li>
    <li>item3-2</li>
    <li>item3-3</li>
    ...
  </ul>
</div>

$('.v-sortable').multipleSortable({
  items: 'li',
  connectWith: '.v-sortable',
  container: '#vertical-list'
});

4. The plugin will automatically add the CSS class 'multiple-sortable-selected' to the selected elements. You can override the CSS class in the JavaScript as this:

.multiple-sortable-selected {
  background-color: yellow;
  color: #222;
}

$('.el').multipleSortable({
  selectedClass: 'multiple-sortable-selected'
});

5. Decide whether to keep the elements selected after sorting.

$('.v-sortable').multipleSortable({
  keepSelection: true
});

6. Horizontal sorting is supported as well.

$('.h-sortable').multipleSortable({
  orientation: 'horizontal'
});

7. Callback functions.

$('.el').multipleSortable({
  click: function(e) { console.log('click', e); },
  activate:   function(event, ui, items) { console.log('activate', event, ui, items) },
  beforeStop: function(event, ui, items) { console.log('beforeStop', event, ui, items) },
  change:     function(event, ui, items) { console.log('change', event, ui, items) },
  create:     function(event, ui, items) { console.log('create', event, ui, items) },
  deactivate: function(event, ui, items) { console.log('deactivate', event, ui, items) },
  out:        function(event, ui, items) { console.log('out', event, ui, items) },
  over:       function(event, ui, items) { console.log('over', event, ui, items) },
  receive:    function(event, ui, items) { console.log('receive', event, ui, items) },
  remove:     function(event, ui, items) { console.log('remove', event, ui, items) },
  sort:       function(event, ui, items) { console.log('sort', event, ui, items) },
  start:      function(event, ui, items) { console.log('start', event, ui, items) },
  stop:       function(event, ui, items) { console.log('stop', event, ui, items) },
  update:     function(event, ui, items) { console.log('update', event, ui, items) },
});

---

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