Drag and drop directives for Angular using native HTML5 API.

Downloads in past


0.2.28 years ago10 years agoMinified + gzip package size for angular-draganddrop in KB


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