Drag Multiple Elements As A Group - jQuery Drag Multiple

Drag Multiple is a simple jQuery/jQuery UI plugin that allows the user to drag multiple DOM elements as a group.

See Also:

• 10 Best Advanced Drag And Drop Plugins

How to use it:

1. Load the necessary jQuery and jQuery UI libraries.

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

2. Group your draggable elements using the ui-selected class.

<div id="draggable1" class="box ui-selected">
  <p>Drag 1</p>
</div>
<div id="draggable2" class="box ui-selected">
  <p>Drag 2</p>
</div>
<div id="draggable3" class="box ui-selected">
  <p>Drag 3</p>
</div>

3. Initialize the plugin to enable the Drag Multiple functionality on those elements.

$(function () {
  $(".box").draggable({
    multiple: true,
  });
});

4. Specify how to handle the Drag Multiple functionality.

// specify draggable elements
multiple.items = function getSelectedItems() {
  return $(".ui-draggable.ui-selected");
};

// specify when to cancel drag multiple
multiple.beforeStart = function beforeDragStart(jqEvent, ui) {
  // make sure target is selected, otherwise deselect others
  if (!(this.is('.ui-draggable') && this.is('.ui-selected'))) {
    $(".ui-draggable").removeClass('ui-selected');
    return false;
  }
};

// called before each draggable.drag event
multiple.beforeDrag = function beforeDrag(jqEvent, ui) {
  // ...
};

// called before draggable.stop event.
multiple.beforeStop = function beforeDragStop(jqEvent, ui) {
  // ...
};

// all selected elements move to the top of the stack when one of them is dragged
multiple.stack

---

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