mischmit/ngDraggable

Drag and drop module for Angular JS

ngDraggable

Drag and drop module for Angular JS with support for touch devices. demo.

Usage:

• Install: bower install ngDraggable
• Add jquery, angular and ngDraggable to your code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="ngDraggable.js"></script>

• Add a dependency to the ngDraggable module in your application.

angular.module('app', ['ngDraggable']);

• Add attribute directives to your html:

Draggable usage:

<div ng-drag="true" ng-drag-data="{obj}" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true">
  Draggable div
</div>

Note: ng-center-anchor is optional. If not specified, it defaults to false.

Drop area usage:

<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" >
  Drop area
</div>

Angular Controller:

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);
    }
 };

Examples

Drag and drop.

Re-ordering.

Cloning.

Canceling.