ad

angular-draganddrop

Drag and drop directives for Angular using native HTML5 API.

Showing:

Popularity

Downloads/wk

228

GitHub Stars

29

Maintenance

Last Commit

6yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

angular-draganddrop

This plugin is no longer actively maintained, you can still use it but issues will not be resolved. If you want the npm name, you can contact me by email.

Build Status Dependency Status devDependency Status

Drag and drop directives for Angular using native HTML5 API.

Install

Using bower

bower install angular-draganddrop

Using npm

npm install angular-draganddrop

Usage

HTML :

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

</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']; // http://mywebsite.com/..

    // ...
  };

  // 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 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#effectAllowed.28.29. 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 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29. 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+.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial