Angular Drag and Drop, with no dependency on Jquery or other library.


Angular Core Dependency: 1.2.19

Module License: MIT

Added by: Sam Deering





Stars: 13

Watchers: 13

Forks: 1

Module Description

Angular Drag'n Drop

Angular Drag'n Drop uses native HTML5 Drag and Drop, using few directives to control this feature, with no dependency on Jquery.


See the documentation: how it works!

Basic Usage

[ 1 ] Get Angular Drag'n Drop using Download Option or via bower. To get using Bower just run this command:

$ bower install angular-drag-n-drop

[ 2 ] Add the source before body tag end:

<script src="angular-dragdrop.min.js"></script>

[ 3 ] Start the Drag'n Drop in any element:

<div ng-app="dragAndDrop" ng-controller="dragAndDropController">

[ 4 ] For each element allow dragging property, use draggable directive:

<p draggable>Indiana Jones</p>
<div draggable>Obi Wan Kenobi</div>

[ 5 ] For allow drop in any element, use droppable directive:

<div class="box" droppable></div>

Browser Support

IE | Chrome | Firefox | Opera | Safari --- | --- | --- | --- | --- | IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: `git commit -m 'Add some feature'``
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :)


License: MIT

Created by Raphael Amorim

Module stats last updated: 2018-01-01 15:00:08

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!