Drag Multiple Elements As A Group - jQuery Drag Multiple
File Size: | 213 KB |
---|---|
Views Total: | 749 |
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.