linecode / jquery.drag-multiple Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 97.30% HTML 2.70%

jquery.drag-multiple's Introduction

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.