Drag Multiple Elements As A Group - jQuery Drag Multiple

Drag Multiple Elements As A Group - jQuery Drag Multiple
File Size: 213 KB
Views Total: 5
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See Also:

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.