diff --git a/README.md b/README.md index a74d0aa..489fbf9 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,20 @@ Drag and drop directives for Angular using native HTML5 API. ## introduction -This module defines 2 directives : + +This module is a simple Angular wrapping of the native HTML5 drag & drop API + a few common utilities. +Callbacks are invoked in Angular context. + +It defines 2 directives : * "draggable" for a draggable element * "drop" for a drop zone -It handles data type control. +It handles data type control, adding a CSS class on drag and on hover and takes care of one HTML5 quirk. -Note HTML5 drag&drop is not trivial. Recommended reads : -* http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html -* https://html.spec.whatwg.org/multipage/interaction.html#dnd +**CAUTION** The HTML5 drag&drop API is NOT trivial. +* If you know it and want to use it, proceed with this package +* If you don't know it, consider using a 3rd-party re-implementation : http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html +* Reference doc for drag&drop API : + * https://html.spec.whatwg.org/multipage/interaction.html#dnd ## Install @@ -31,9 +37,11 @@ bower install angular-draganddrop npm install angular-draganddrop ``` + ## Usage -HTML : +1. read the warning in introduction (really) +2. HTML : ```html @@ -51,7 +59,7 @@ HTML : ``` -JavaScript : +3. JavaScript : ```js angular.module('controllers.dragDrop', ['draganddrop']) @@ -105,7 +113,7 @@ Parameters : - "drag-leave" (optional) an Angular expression to be evaluated on drag leave ("dragleave" event). - "drop" (optional) an Angular expression to be evaluated on drag over ("drop" event). -Handlers are : `(scope, { $data: data, $event: event })` +Handlers are called with : `(data, event)` ## Browsers support diff --git a/angular-draganddrop.js b/angular-draganddrop.js index 84fbd23..8ec6b41 100644 --- a/angular-draganddrop.js +++ b/angular-draganddrop.js @@ -4,7 +4,8 @@ angular .directive('drop', ['$parse', dropDirective]); -// for developers +// log hooks for developers +// @see https://github.com/lemonde/angular-draganddrop/wiki#possible-implementations-of-debug-hooks- function debugDraggable(scope) {} function debugDroppable(scope) {} @@ -29,6 +30,8 @@ function debugDroppable(scope) {} */ function draggableDirective($parse) { + 'use strict'; + return { restrict: 'A', link: function (scope, element, attrs) { @@ -145,6 +148,8 @@ function draggableDirective($parse) { */ function dropDirective($parse) { + 'use strict'; + return { restrict: 'A', link: function (scope, element, attrs) { @@ -183,14 +188,15 @@ function dropDirective($parse) { return true; } - // Set up drop effect to link. - event.dataTransfer.dropEffect = dropEffect || event.dataTransfer.dropEffect; - // Prevent default to accept drag and drop. event.preventDefault(); + // Set up drop effect to link. + event.dataTransfer.dropEffect = dropEffect || event.dataTransfer.dropEffect; + if (dragOverClass) element.addClass(dragOverClass); + // throttling to avoid loading CPU var now = new Date().getTime(); if (now - throttledDragover < 200) { debugDroppable(scope, 'dragover throttled'); @@ -198,14 +204,10 @@ function dropDirective($parse) { } throttledDragover = now; - if (! attrs.dragOver) { - debugDroppable(scope, 'no dragover callback'); - return; - } - - var data = getData(event); + if (! attrs.dragOver) return; // Call custom handler + var data = getData(event); scope.$apply(function () { debugDroppable(scope, 'dragover callback !'); dragOverHandler(scope, { $data: data, $event: event }); @@ -221,11 +223,12 @@ function dropDirective($parse) { // Prevent default to accept drag and drop. event.preventDefault(); - if (! attrs.dragEnter) return; + if (dragOverClass) element.addClass(dragOverClass); - var data = getData(event); + if (! attrs.dragEnter) return; // Call custom handler + var data = getData(event); scope.$apply(function () { dragEnterHandler(scope, { $data: data, $event: event }); }); @@ -240,13 +243,12 @@ function dropDirective($parse) { // Prevent default to accept drag and drop. event.preventDefault(); - removeDragOverClass(); + element.removeClass(dragOverClass); if (! attrs.dragLeave) return; - var data = getData(event); - // Call custom handler + var data = getData(event); scope.$apply(function () { dragLeaveHandler(scope, { $data: data, $event: event }); }); @@ -255,25 +257,16 @@ function dropDirective($parse) { function dropListener(event) { debugDroppable(scope, 'drop'); - var data = getData(event); + // Prevent default navigator behaviour. + event.preventDefault(); - removeDragOverClass(); + element.removeClass(dragOverClass); // Call custom handler + var data = getData(event); scope.$apply(function () { dropHandler(scope, { $data: data, $event: event }); }); - - // Prevent default navigator behaviour. - event.preventDefault(); - } - - /** - * Remove the drag over class. - */ - - function removeDragOverClass() { - element.removeClass(dragOverClass); } /** diff --git a/test/drop.js b/test/drop.js index c9374a7..975e357 100644 --- a/test/drop.js +++ b/test/drop.js @@ -19,9 +19,9 @@ describe('Drop directive', function () { var dragDataStore = { // pre-filled with test data 'json/image': {foo: 'bar'}, - //'json': {foo: 'bar'}, + 'json': {foo: 'bar'}, 'text/uri-list': 'http://dragdrop.com', - //'text': 'http://dragdrop.com'*/ + 'text': 'http://dragdrop.com' }; // "dragover" event. @@ -314,7 +314,13 @@ describe('Drop directive', function () { }); describe('throttling', function() { - it('should limit the calls to the drag-over callback'); + // https://github.com/lemonde/angular-draganddrop/issues/2 + it.skip('should limit the calls to the drag-over callback'); + }); + + describe('automatic handling of HTML5 API quirks', function() { + // https://github.com/lemonde/angular-draganddrop/issues/2 + it.skip('should call preventDefault() on selected events'); }); });