A jQueryUI plugin enabling the selection, drag and drop of multiple ui-draggable elements.
JavaScript
Switch branches/tags
Nothing to show
Latest commit ac82c16 May 14, 2014 @javadoug Update README.md

README.md

Drag Multiple Plugin

A jQueryUI plugin enabling the selection, drag and drop of multiple ui-draggable elements.

Getting Started

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.

Documentation

Options

You can pass the following parameters within the multiple option hash object:

multiple.items

Specify the selection of elements to move. The default selection is $(".ui-draggable.ui-selected").

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

multiple.beforeStart

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;
    }
};

multiple.beforeDrag

Called on before each draggable.drag event. The default is $.noop.

multiple.beforeDrag = function beforeDrag(jqEvent, ui) {
    
};

multiple.beforeStop

Called before draggable.stop event. The default is $.noop.

multiple.beforeStop = function beforeDragStop(jqEvent, ui) {
    
};

Examples

(Coming soon)

Release History

0.1.0 inital release

0.1.1 fix