Drag and drop directives for Angular using native HTML5 API.

Angular Core Dependency: >=1.2.0

Module License: MIT

Added by: Sam Deering





Stars: 27

Watchers: 27

Forks: 15


Greg Bergé
Greg Bergé

Module Description


Build Status Dependency Status devDependency Status

Drag and drop directives for Angular using native HTML5 API.


Using bower

bower install angular-draganddrop

Using npm

npm install angular-draganddrop



<!-- Load files. -->
<script src="angular.js"></script>
<script src="angular-draganddrop.js"></script>

<div ng-controller="DragDropCtrl">

  <!-- Draggable element. -->
  <div draggable="true" effect-allowed="copy" draggable-type="custom-object" draggable-data="{foo: 'bar'}"></div>

  <!-- Dropzone element. -->
  <div drop="onDrop($data, $event)" drop-effect="copy" drop-accept="'json/custom-object'" drag-over="onDragOver($event)" drag-over-class="drag-over-accept"></div>


JavaScript :

angular.module('controllers.dragDrop', ['draganddrop'])
.controller('DragDropCtrl', function ($scope) {

  // Drop handler.
  $scope.onDrop = function (data, event) {
    // Get custom object data.
    var customObjectData = data['json/custom-object']; // {foo: 'bar'}

    // Get other attached data.
    var uriList = data['text/uri-list']; //

    // ...

  // Drag over handler.
  $scope.onDragOver = function (event) {
    // ...

"draggable" directive

  • "draggable" Make the element draggable. Accepts a boolean.
  • "effect-allowed" Allowed effects for the dragged element, see Accepts a string.
  • "draggable-type" Type of data object attached to the dragged element, this type is prefixed by "json/". Accepts a string.
  • "draggable-data" Data attached to the dragged element, data are serialized in JSON. Accepts an Angular expression.

The draggable directive serializes data as JSON and prefix the specified type with "json/".

"drop" directive

  • "drop" Drop handler, executed on drop. Accepts an Angular expression.
  • "drop-effect" Drop effect to set, see Accepts a string.
  • "drop-accept" Types accepted or function to prevent unauthorized drag and drop. Accepts a string, an array, a function or a boolean.
  • "drag-over" Drag over handler, executed on drag over. Accepts an Angular expression.
  • "drag-over-class" Class set on drag over, when the drag is authorized. Accepts a string.

The drop directive automatically unserializes data with the "json" format, other data are not formatted.

Browsers support

All navigators that support the native HTML5 API should be supported.

Tested on Firefox 24+, Chrome 31+.



Module stats last updated: 2017-11-17 15:00:04

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!