Skip to content

Latest commit

 

History

History
77 lines (52 loc) · 2.3 KB

README.md

File metadata and controls

77 lines (52 loc) · 2.3 KB

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

multiple.stack

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.

Examples

(Coming soon)

Release History

0.1.0 inital release

0.1.1 fix

0.1.2 fix