Drag & Drop Multiple Elements At Once With jQuery - Multidraggable

Multidraggable is a jQuery plugin used to extend the jQuery UI's draggable interaction that enables the user to select and drag & drop multiple elements at once.

How to use it:

1. The plugin requires jQuery and jQuery UI loaded properly in the document.

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

2. Load the main script multidraggable.js after jQuery.

<script src="multidraggable.js"></script>

3. Create a group of html elements as follow:

<ul id="multidraggable">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  ...
</ul>

4. Attach the function multidraggable to the top container (html list in this case):

$('#multidraggable').multidraggable();

5. Default options available.

$('#multidraggable').multidraggable({

  //onCreate RETURN EVENT UI
  create:function(event, ui) {
      opts.onCreate ? opts.onCreate(event, ui) : {};
  },

  //onSelecting RETURN EVENT UI
  selecting: function( event, ui ) {
      opts.onSelecting ? opts.onSelecting(event, ui) : {};
  },

  //onSelected RETURN EVENT UI
  selected:function( event, ui ) {
      opts.onSelected ? opts.onSelected(event, ui) : {};
  },

  //onStopSelecting RETURN EVENT UI
  stop: function( event, ui ) {
      var group = [];
      $('.ui-selected').each(function(){
          group.push(this);
      });
      global.group = group;
      opts.onStopSelecting ? opts.onStopSelecting(event, ui) : {};
  },

  //onStartSelecting RETURN EVENT UI
  start:function( event, ui ) {
      opts.onStartSelecting ? opts.onStartSelecting(event, ui) : {};
  },

  //onUnselected RETURN EVENT UI
  unselected: function(event, ui){
      global.group = [];
      opts.onUnselected ? opts.onUnselected(event, ui) : {};
  },

  //onUnselecting RETURN EVENT UI
  unselecting:function(event, ui) {
      opts.onUnselecting ? opts.onUnselecting(event, ui) : {};
  }

});

---

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