Demo

Usage

Each draggable widget gets an attribute of draggable-widget and must contain an element with a draggable-widget-handle attribute.

Dragging the handle sets position absolute on the element causing it to drop out of the layout flow. On completion the callback is executed.

Drag-group

If you want automatic updating you must specify at least one drag group that points to an array in scope.

Callback

Specify a callback function with the draggable-widget-callback attribute. The callback will receive a drag object that contains references to the old and new arrays (assuming you have dragged between groups, and the insertion point. See the demo app for examples.

Classes

Elements gain a class of dragging while being dragged.

The Placeholder

A div with a class of placeholder will be inserted into the DOM at the drop point. This will have the correct width and height. You may wish to style this div to match your widgets.