A set of super simple drag and drop directives for Angular.
0 people use it

Draggable widgets for Angular. No jQuery dependency.



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.


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


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.


  • 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.

Browser compatibility

IE9+ only please. Mobile support not guaranteed.


MIT license, use it as you see fit. I'm not going to sue you.

comments powered by Disqus
This page was last updated almost 3 years ago.