Angular directives to add native, simple, data-driven drag and drop functionality.
gm.dragDrop is available on both NPM and Bower:
$ npm/bower install gm.drag-drop --save
First, add the gm.dragDrop
module to your app's dependencies:
var app = angular.module('myApp', ['gm.dragDrop']);
There are 3 directives included in the module: gmDraggable
, gmOnDrop
, and gmOnHover
. Adding the gmDraggable
directive to an element makes it draggable. Adding the gmOnDrop
directive to an element sets it as a drop zone for the draggable element. Set the value of gmOnHover
or gmOnDrop
to a function that will be called when the dragged element is over or released on an element, respectively. Set the value of gmDraggable
to the object you want to be passed to gmOnDrop
.
Items with gmDraggable
set can also assign a function to a gmOnInvalidDrop
attribute, which will be called if the item is dropped anywhere but a valid drop zone.
...
this.data = { key: "number", value: "1" }
this.onHover = function(_data, mouseEvent) {
console.log('hovering', _data.key, _data.value); // hovering number 1
}
this.onDrop = function(_data) {
console.log('dropped', _data.key, _data.value); // dropped number 1
}
this.invalidDrop = function(_data) {
console.log('invalid drop', _data.key, _data.value); // invalid drop number 1
}
...
<span gm-draggable="$ctrl.data" gm-on-invalid-drop='$ctrl.invalidDrop'>Number {{data.value}}</span>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-on-hover='$ctrl.onHover'>Drop Area</div>
You can define style for three classes, .gm-drag-element
, .gm-dragging
and .gm-dropping
, to set the style of the original element that was clicked, the element being dragged, and the drop zone element when the mouse hovers over it while dragging, respectively.
You can also define a gm-drop-zone
attribute on both draggable elements and drop zones to control where elements can be dropped. Functions assigned to an element's gm-on-drop
or gm-on-hover
attributes will only be called when its gm-drop-zone
attribute matches the dragged element's gm-drop-zone
attribute.
<span gm-draggable="$ctrl.data" gm-drop-zone='1'>Number {{data.value}}</span>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-drop-zone='2'>Cannot Drop Here</div>
<div style='width:30%; float:right; padding:50px; border:solid black 1px' gm-on-drop="$ctrl.onDrop" gm-drop-zone='1'>Drops Allowed Here</div>
You can add a child element to a gm-draggable
element with the tag name or class gm-drag-handle
to have it act as the drag 'handle' if you don't want the entire element to respond to dragging.
<span gm-draggable="$ctrl.data">
<span class="gm-drag-handle">[Dragging only works if you click here]</span> Number {{data.value}}
</span>