Drag and drop module for Angular JS
npm install ng-draggablengDraggable
===========
Drag and drop module for Angular JS with support for touch devices. demo.
- Install: bower install ngDraggable
- Add angular and ngDraggable to your code:
``html`
- Add a dependency to the ngDraggable module in your application.
`js`
angular.module('app', ['ngDraggable']);
- Add attribute directives to your html:
Draggable usage:
`html`
Draggable div
* ng-center-anchor is optional. If not specified, it defaults to false.ng-drag-handle
* If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
* You can define a drag-button as child with the attribute .
`ng-drag-start` and `ng-drag-move` is also available. Add to the ng-drop element.ng-drag-stop can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
`draggable:start`, `draggable:move` and `draggable:end` events are broadcast on drag actions.
Drop area usage:
`html`
Drop area
`js`
app.controller('MainCtrl', function ($scope) {
$scope.onDragComplete=function(data,evt){
console.log("drag success, data:", data);
}
$scope.onDropComplete=function(data,evt){
console.log("drop success, data:", data);
}
};