A jQueryUI plugin enabling the selection, drag and drop of multiple ui-draggable elements.
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="dist/jquery-ui.drag-multiple.min.js"></script>
<script>
jQuery(function($) {
$('div').draggable({multiple: true});
});
</script>
Then add .ui-selected class to .ui-draggable elements to drag them as a group.
You can pass the following parameters within the multiple option hash object:
Specify the selection of elements to move. The default selection is $(".ui-draggable.ui-selected").
multiple.items = function getSelectedItems() {
return $(".ui-draggable.ui-selected");
};
Cancel drag multiple and other setup work you might need. The default implementation is shown here.
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 on before each draggable.drag event. The default is $.noop.
multiple.beforeDrag = function beforeDrag(jqEvent, ui) {
};
Called before draggable.stop event. The default is $.noop.
multiple.beforeStop = function beforeDragStop(jqEvent, ui) {
};
Just like jQueryUI Draggable's stack option, but for multiple elements; all selected elements move to the top of the stack when one of them is dragged. The default is false.
(Coming soon)