Minimal Multiple Sortable Plugin For jQuery UI - multipleSortable

File Size: 7.29 KB
Views Total: 4412
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
  <ul class="v-sortable">
  <ul class="v-sortable">
  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;
  selectedClass: 'multiple-sortable-selected'

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

  keepSelection: true

6. Horizontal sorting is supported as well.

  orientation: 'horizontal'

7. Callback functions.

  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.