fatlinesofcode/ngDraggable


Drag and drop module for Angular JS

License: MIT

Language: JavaScript


ngDraggable

NOTE: I'm not actively maintaining this project any more. If any anyone would like to take on that responsible please get in touch

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

Usage:

  • Install: bower install ngDraggable
  • Add angular and ngDraggable to your code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/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>
  • ng-center-anchor is optional. If not specified, it defaults to false.
  • 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-handle.

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:

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

Pull requests

We welcome pull requests but please check that all the examples still work if you modified the source base. There have been serveral PRs recently that broke core functionality. If you are feeling really keen you could include some protractor test cases in your PR.

Project Statistics

Sourcerank 10
Repository Size 101 KB
Stars 623
Forks 402
Watchers 46
Open issues 109
Dependencies 1
Contributors 27
Tags 18
Created
Last updated
Last pushed

Top Contributors See all

Philip Andrews Sanborn Alex Wait Candid Dauth Remigius2011 Jan Jaison Erick gregvis Bengt-Ove Holländer Florian M. Cory Locklear Ryan Baker Sebastian Hofmann Nicolas Bases Justin Morant Sunny Chan Beni Buess Marius Kelpsa Juha Karttunen Janek Lasocki-Biczysko

Packages Referencing this Repo

ngDraggable
Drag and drop module for Angular JS
Latest release 0.1.11 - Published - 623 stars
org.webjars.bower:ngDraggable
WebJar for ngDraggable
Latest release 0.1.11 - Updated - 623 stars
ngdraggable
Drag and drop module for Angular JS
Latest release 0.1.11 - Published - 623 stars
thoms:ng-draggable
ngDraggable
Latest release 0.1.8 - Published - 623 stars
ngdraggable
Drag and drop module for Angular JS with support for touch devices
Latest release 0.1.10 - Published - 623 stars
ng-draggable
Drag and drop module for Angular JS
Latest release 1.0.0 - Published - 623 stars
ng-draggable-by-fatlinesofcode
Drag and drop module for Angular JS with support for touch devices
Latest release 0.1.11 - Published - 623 stars

Recent Tags See all

0.1.11 September 28, 2016
0.1.10 July 14, 2016
0.1.9 July 14, 2016
0.1.8 April 20, 2015
0.1.7 April 19, 2015
0.1.6 April 17, 2015
0.1.5 April 17, 2015
0.1.4 March 31, 2015
0.1.3 March 17, 2015
0.1.2 March 12, 2015
0.1.1 March 12, 2015
0.1.0 March 12, 2015
0.0.4.1 March 04, 2015
0.0.4 January 21, 2015
0.0.3.1 January 13, 2015

Interesting Forks See all

liamly/ngDraggable
Drag and drop module for Angular JS
JavaScript - Updated - 1 stars
akveoDev/ngDraggable
Drag and drop module for Angular JS
JavaScript - MIT - Last pushed - 1 stars
socialbase/ngDraggable
Drag and drop module for Angular JS
JavaScript - MIT - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2017-03-27 23:59:45 UTC

Login to resync this repository