ngx-drag-drop - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0-rc.0

bundles/ngx-drag-drop.umd.js

@@ -458,6 +458,9 @@ (function (global, factory) {
     /**
+     * @param {?} ngZone
      * @param {?} elementRef
      * @param {?} renderer
      */
-    function DndDropzoneDirective(elementRef, renderer) {
+    function DndDropzoneDirective(ngZone, elementRef, renderer) {
+        var _this = this;
+        this.ngZone = ngZone;
         this.elementRef = elementRef;
@@ -473,2 +476,5 @@ this.renderer = renderer;
         this.disabled = false;
+        this.dragEnterEventHandler = function (event) { return _this.onDragEnter(event); };
+        this.dragOverEventHandler = function (event) { return _this.onDragOver(event); };
+        this.dragLeaveEventHandler = function (event) { return _this.onDragLeave(event); };
     }
@@ -496,2 +502,3 @@ Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", {
     DndDropzoneDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.placeholder = this.tryGetPlaceholder();
@@ -501,4 +508,17 @@ if (this.placeholder !== null) {
         }
+        this.ngZone.runOutsideAngular(function () {
+            _this.elementRef.nativeElement.addEventListener("dragenter", _this.dragEnterEventHandler);
+            _this.elementRef.nativeElement.addEventListener("dragover", _this.dragOverEventHandler);
+            _this.elementRef.nativeElement.addEventListener("dragleave", _this.dragLeaveEventHandler);
+        });
     };
     /**
+     * @return {?}
+     */
+    DndDropzoneDirective.prototype.ngOnDestroy = function () {
+        this.elementRef.nativeElement.removeEventListener("dragenter", this.dragEnterEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragover", this.dragOverEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragleave", this.dragLeaveEventHandler);
+    };
+    /**
      * @param {?} event
@@ -533,2 +553,10 @@ * @return {?}
     DndDropzoneDirective.prototype.onDragOver = function (event) {
+        // With nested dropzones, we want to ignore this event if a child dropzone
+        // has already handled a dragover.  Historically, event.stopPropagation() was
+        // used to prevent this bubbling, but that prevents any dragovers outside the
+        // ngx-drag-drop component, and stops other use cases such as scrolling on drag.
+        // Instead, we can check if the event was already prevented by a child and bail early.
+        if (event.defaultPrevented) {
+            return;
+        }
         // check if this drag event is allowed to drop on this dropzone
@@ -551,3 +579,2 @@ var /** @type {?} */ type = getDndType(event);
         this.renderer.addClass(this.elementRef.nativeElement, this.dndDragoverClass);
-        event.stopPropagation();
     };
@@ -710,2 +737,3 @@ /**
 DndDropzoneDirective.ctorParameters = function () { return [
+    { type: core.NgZone, },
     { type: core.ElementRef, },
@@ -725,6 +753,3 @@ { type: core.Renderer2, },
     'dndDisableIf': [{ type: core.Input },],
-    'onDragEnter': [{ type: core.HostListener, args: ["dragenter", ["$event"],] },],
-    'onDragOver': [{ type: core.HostListener, args: ["dragover", ["$event"],] },],
     'onDrop': [{ type: core.HostListener, args: ["drop", ["$event"],] },],
-    'onDragLeave': [{ type: core.HostListener, args: ["dragleave", ["$event"],] },],
 };
@@ -731,0 +756,0 @@ var DndHandleDirective = /** @class */ (function () {

bundles/ngx-drag-drop.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],t):t(e["ngx-drag-drop"]={},e.ng.core,e.ng.common)}(this,function(e,t,n){"use strict";function r(e){return e.substr(0,y.length)===y}function d(e){var t=e.dataTransfer.types;if(!t)return b;for(var n=0;n<t.length;n++)if(t[n]===b||t[n]===E||r(t[n]))return t[n];return null}function a(e,t,n){var r=y+(t.type?"-"+t.type:""),d=JSON.stringify(t);try{e.dataTransfer.setData(r,d)}catch(i){try{e.dataTransfer.setData(E,d)}catch(i){var a=o(m,n);e.dataTransfer.effectAllowed=a[0],e.dataTransfer.setData(b,d)}}}function i(e,t){var n=d(e);return!0===t?null!==n&&r(n)?JSON.parse(e.dataTransfer.getData(n)):{}:JSON.parse(e.dataTransfer.getData(n))}function o(e,t){return"all"===t?e:e.filter(function(e){return-1!==t.toLowerCase().indexOf(e)})}function s(e,t){for(var n=t;n.parentNode!==e;){if(!n.parentNode)return null;n=n.parentNode}return n}function l(e,t,n){var r=t.getBoundingClientRect();return n?e.clientX<r.left+r.width/2:e.clientY<r.top+r.height/2}function p(e,t){var n=window.getComputedStyle(t),r=parseFloat(n.paddingTop)||0,d=parseFloat(n.paddingLeft)||0,a=parseFloat(n.borderTopWidth)||0,i=parseFloat(n.borderLeftWidth)||0;return{x:e.offsetX+d+i,y:e.offsetY+r+a}}function f(e,t,n){var r=n(e,t)||{x:0,y:0};e.dataTransfer.setDragImage(t,r.x,r.y)}function g(e,t,n){C.isDragging=!0,C.dropEffect="none",C.effectAllowed=t,C.type=n,e.dataTransfer.effectAllowed=t}function c(){C.isDragging=!1,C.dropEffect=undefined,C.effectAllowed=undefined,C.type=undefined}function u(e,t){!0===C.isDragging&&(C.dropEffect=t),e.dataTransfer.dropEffect=t}function h(e,t){var n=m;return n=o(n,e.dataTransfer.effectAllowed),!0===C.isDragging&&(n=o(n,C.effectAllowed)),t&&(n=o(n,t)),0===n.length?"none":e.ctrlKey&&-1!==n.indexOf("copy")?"copy":e.altKey&&-1!==n.indexOf("link")?"link":n[0]}function D(e){if(!0===C.isDragging)return C.type;var t=d(e);return null===t?undefined:t===b||t===E?undefined:t.substr(y.length+1)||undefined}function v(){return!1===C.isDragging}var m=["move","copy","link"],y="application/x-dnd",E="application/json",b="Text",C={isDragging:!1,dropEffect:"none",effectAllowed:"all",type:undefined},R=C,I=function(){function e(e,t){e.registerDragImage(t)}return e}();I.decorators=[{type:t.Directive,args:[{selector:"[dndDragImageRef]"}]}],I.ctorParameters=function(){return[{type:w},{type:t.ElementRef}]};var w=function(){function e(e,n){this.elementRef=e,this.renderer=n,this.dndEffectAllowed="copy",this.dndDraggingClass="dndDragging",this.dndDraggingSourceClass="dndDraggingSource",this.dndDraggableDisabledClass="dndDraggableDisabled",this.dndDragImageOffsetFunction=p,this.dndStart=new t.EventEmitter,this.dndEnd=new t.EventEmitter,this.dndMoved=new t.EventEmitter,this.dndCopied=new t.EventEmitter,this.dndLinked=new t.EventEmitter,this.dndCanceled=new t.EventEmitter,this.draggable=!0}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.draggable=!e,this.draggable?this.renderer.removeClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass):this.renderer.addClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.onDragStart=function(e){var t=this;if(!1===this.draggable)return!1;if("undefined"!=typeof this.dndHandle&&"undefined"==typeof e._dndUsingHandle)return!1;g(e,this.dndEffectAllowed,this.dndType),a(e,{data:this.dndDraggable,type:this.dndType},R.effectAllowed),this.determineDragImage(),this.renderer.addClass(this.dragImage,this.dndDraggingClass),"undefined"==typeof this.dndDragImageElementRef&&"undefined"==typeof e._dndUsingHandle||f(e,this.dragImage,this.dndDragImageOffsetFunction);var n=this.renderer.listen(this.elementRef.nativeElement,"drag",function(){t.renderer.addClass(t.elementRef.nativeElement,t.dndDraggingSourceClass),n()});this.dndStart.emit(e),e.stopPropagation()},e.prototype.onDragEnd=function(e){var t,n=this;switch(R.dropEffect){case"copy":t=this.dndCopied;break;case"link":t=this.dndLinked;break;case"move":t=this.dndMoved;break;default:t=this.dndCanceled}t.emit(e),this.dndEnd.emit(e),c(),this.renderer.removeClass(this.dragImage,this.dndDraggingClass),window.setTimeout(function(){n.renderer.removeClass(n.elementRef.nativeElement,n.dndDraggingSourceClass)},0),e.stopPropagation()},e.prototype.registerDragHandle=function(e){this.dndHandle=e},e.prototype.registerDragImage=function(e){this.dndDragImageElementRef=e},e.prototype.determineDragImage=function(){"undefined"!=typeof this.dndDragImageElementRef?this.dragImage=this.dndDragImageElementRef.nativeElement:this.dragImage=this.elementRef.nativeElement},e}();w.decorators=[{type:t.Directive,args:[{selector:"[dndDraggable]"}]}],w.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},w.propDecorators={dndDraggable:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndType:[{type:t.Input}],dndDraggingClass:[{type:t.Input}],dndDraggingSourceClass:[{type:t.Input}],dndDraggableDisabledClass:[{type:t.Input}],dndDragImageOffsetFunction:[{type:t.Input}],dndStart:[{type:t.Output}],dndEnd:[{type:t.Output}],dndMoved:[{type:t.Output}],dndCopied:[{type:t.Output}],dndLinked:[{type:t.Output}],dndCanceled:[{type:t.Output}],draggable:[{type:t.HostBinding,args:["attr.draggable"]}],dndDisableIf:[{type:t.Input}],onDragStart:[{type:t.HostListener,args:["dragstart",["$event"]]}],onDragEnd:[{type:t.HostListener,args:["dragend",["$event"]]}]};var A=function(){function e(e){this.elementRef=e}return e}();A.decorators=[{type:t.Directive,args:[{selector:"[dndPlaceholderRef]"}]}],A.ctorParameters=function(){return[{type:t.ElementRef}]};var P=function(){function e(e,n){this.elementRef=e,this.renderer=n,this.dndAllowExternal=!1,this.dndHorizontal=!1,this.dndDragoverClass="dndDragover",this.dndDropzoneDisabledClass="dndDropzoneDisabled",this.dndDragover=new t.EventEmitter,this.dndDrop=new t.EventEmitter,this.placeholder=null,this.disabled=!1}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.disabled=!!e,this.disabled?this.renderer.addClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass):this.renderer.removeClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.placeholder=this.tryGetPlaceholder(),null!==this.placeholder&&this.placeholder.remove()},e.prototype.onDragEnter=function(e){if(!0!==e._dndDropzoneActive){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);this.elementRef.nativeElement.contains(t)&&(e._dndDropzoneActive=!0)}var n=D(e);!1!==this.isDropAllowed(n)&&e.preventDefault()}else this.cleanupDragoverState()},e.prototype.onDragOver=function(e){var t=D(e);if(!1!==this.isDropAllowed(t)){this.checkAndUpdatePlaceholderPosition(e);var n=h(e,this.dndEffectAllowed);"none"!==n?(e.preventDefault(),u(e,n),this.dndDragover.emit(e),this.renderer.addClass(this.elementRef.nativeElement,this.dndDragoverClass),e.stopPropagation()):this.cleanupDragoverState()}},e.prototype.onDrop=function(e){try{var t=D(e);if(!1===this.isDropAllowed(t))return;var n=i(e,v());if(!1===this.isDropAllowed(n.type))return;e.preventDefault();var r=h(e);if(u(e,r),"none"===r)return;var d=this.getPlaceholderIndex();this.dndDrop.emit({event:e,dropEffect:r,isExternal:v(),data:n.data,index:d}),e.stopPropagation()}finally{this.cleanupDragoverState()}},e.prototype.onDragLeave=function(e){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);if(this.elementRef.nativeElement.contains(t))return void(e._dndDropzoneActive=!0)}this.cleanupDragoverState(),u(e,"none")},e.prototype.tryGetPlaceholder=function(){return"undefined"!=typeof this.dndPlaceholderRef?this.dndPlaceholderRef.elementRef.nativeElement:this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]")},e.prototype.isDropAllowed=function(e){if(!0===this.disabled)return!1;if(!0===v()&&!1===this.dndAllowExternal)return!1;if(!this.dndDropzone)return!0;if(!e)return!0;if(!1===Array.isArray(this.dndDropzone))throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!");return-1!==this.dndDropzone.indexOf(e)},e.prototype.checkAndUpdatePlaceholderPosition=function(e){if(null!==this.placeholder){this.placeholder.parentNode!==this.elementRef.nativeElement&&this.renderer.appendChild(this.elementRef.nativeElement,this.placeholder);var t=s(this.elementRef.nativeElement,e.target);null!==t&&t!==this.placeholder&&(l(e,t,this.dndHorizontal)?t.previousSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t):t.nextSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t.nextSibling))}},e.prototype.getPlaceholderIndex=function(){if(null===this.placeholder)return undefined;var e=this.elementRef.nativeElement;return Array.prototype.indexOf.call(e.children,this.placeholder)},e.prototype.cleanupDragoverState=function(){this.renderer.removeClass(this.elementRef.nativeElement,this.dndDragoverClass),null!==this.placeholder&&this.placeholder.remove()},e}();P.decorators=[{type:t.Directive,args:[{selector:"[dndDropzone]"}]}],P.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},P.propDecorators={dndDropzone:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndAllowExternal:[{type:t.Input}],dndHorizontal:[{type:t.Input}],dndDragoverClass:[{type:t.Input}],dndDropzoneDisabledClass:[{type:t.Input}],dndDragover:[{type:t.Output}],dndDrop:[{type:t.Output}],dndPlaceholderRef:[{type:t.ContentChild,args:[A]}],dndDisableIf:[{type:t.Input}],onDragEnter:[{type:t.HostListener,args:["dragenter",["$event"]]}],onDragOver:[{type:t.HostListener,args:["dragover",["$event"]]}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}],onDragLeave:[{type:t.HostListener,args:["dragleave",["$event"]]}]};var x=function(){function e(e){this.draggable=!0,e.registerDragHandle(this)}return e.prototype.onDragEvent=function(e){e._dndUsingHandle=!0},e}();x.decorators=[{type:t.Directive,args:[{selector:"[dndHandle]"}]}],x.ctorParameters=function(){return[{type:w}]},x.propDecorators={draggable:[{type:t.HostBinding,args:["attr.draggable"]}],onDragEvent:[{type:t.HostListener,args:["dragstart",["$event"]]},{type:t.HostListener,args:["dragend",["$event"]]}]};var O=function(){function e(){}return e}();O.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[w,P,x,A,I],exports:[w,P,x,A,I]}]}],O.ctorParameters=function(){return[]},e.DndDragImageRefDirective=I,e.DndDraggableDirective=w,e.DndPlaceholderRefDirective=A,e.DndDropzoneDirective=P,e.DndHandleDirective=x,e.DndModule=O,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],t):t(e["ngx-drag-drop"]={},e.ng.core,e.ng.common)}(this,function(e,t,n){"use strict";function r(e){return e.substr(0,y.length)===y}function d(e){var t=e.dataTransfer.types;if(!t)return b;for(var n=0;n<t.length;n++)if(t[n]===b||t[n]===E||r(t[n]))return t[n];return null}function a(e,t,n){var r=y+(t.type?"-"+t.type:""),d=JSON.stringify(t);try{e.dataTransfer.setData(r,d)}catch(i){try{e.dataTransfer.setData(E,d)}catch(i){var a=o(D,n);e.dataTransfer.effectAllowed=a[0],e.dataTransfer.setData(b,d)}}}function i(e,t){var n=d(e);return!0===t?null!==n&&r(n)?JSON.parse(e.dataTransfer.getData(n)):{}:JSON.parse(e.dataTransfer.getData(n))}function o(e,t){return"all"===t?e:e.filter(function(e){return-1!==t.toLowerCase().indexOf(e)})}function s(e,t){for(var n=t;n.parentNode!==e;){if(!n.parentNode)return null;n=n.parentNode}return n}function l(e,t,n){var r=t.getBoundingClientRect();return n?e.clientX<r.left+r.width/2:e.clientY<r.top+r.height/2}function f(e,t){var n=window.getComputedStyle(t),r=parseFloat(n.paddingTop)||0,d=parseFloat(n.paddingLeft)||0,a=parseFloat(n.borderTopWidth)||0,i=parseFloat(n.borderLeftWidth)||0;return{x:e.offsetX+d+i,y:e.offsetY+r+a}}function p(e,t,n){var r=n(e,t)||{x:0,y:0};e.dataTransfer.setDragImage(t,r.x,r.y)}function g(e,t,n){R.isDragging=!0,R.dropEffect="none",R.effectAllowed=t,R.type=n,e.dataTransfer.effectAllowed=t}function u(){R.isDragging=!1,R.dropEffect=undefined,R.effectAllowed=undefined,R.type=undefined}function c(e,t){!0===R.isDragging&&(R.dropEffect=t),e.dataTransfer.dropEffect=t}function h(e,t){var n=D;return n=o(n,e.dataTransfer.effectAllowed),!0===R.isDragging&&(n=o(n,R.effectAllowed)),t&&(n=o(n,t)),0===n.length?"none":e.ctrlKey&&-1!==n.indexOf("copy")?"copy":e.altKey&&-1!==n.indexOf("link")?"link":n[0]}function v(e){if(!0===R.isDragging)return R.type;var t=d(e);return null===t?undefined:t===b||t===E?undefined:t.substr(y.length+1)||undefined}function m(){return!1===R.isDragging}var D=["move","copy","link"],y="application/x-dnd",E="application/json",b="Text",R={isDragging:!1,dropEffect:"none",effectAllowed:"all",type:undefined},C=R,I=function(){function e(e,t){e.registerDragImage(t)}return e}();I.decorators=[{type:t.Directive,args:[{selector:"[dndDragImageRef]"}]}],I.ctorParameters=function(){return[{type:w},{type:t.ElementRef}]};var w=function(){function e(e,n){this.elementRef=e,this.renderer=n,this.dndEffectAllowed="copy",this.dndDraggingClass="dndDragging",this.dndDraggingSourceClass="dndDraggingSource",this.dndDraggableDisabledClass="dndDraggableDisabled",this.dndDragImageOffsetFunction=f,this.dndStart=new t.EventEmitter,this.dndEnd=new t.EventEmitter,this.dndMoved=new t.EventEmitter,this.dndCopied=new t.EventEmitter,this.dndLinked=new t.EventEmitter,this.dndCanceled=new t.EventEmitter,this.draggable=!0}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.draggable=!e,this.draggable?this.renderer.removeClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass):this.renderer.addClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.onDragStart=function(e){var t=this;if(!1===this.draggable)return!1;if("undefined"!=typeof this.dndHandle&&"undefined"==typeof e._dndUsingHandle)return!1;g(e,this.dndEffectAllowed,this.dndType),a(e,{data:this.dndDraggable,type:this.dndType},C.effectAllowed),this.determineDragImage(),this.renderer.addClass(this.dragImage,this.dndDraggingClass),"undefined"==typeof this.dndDragImageElementRef&&"undefined"==typeof e._dndUsingHandle||p(e,this.dragImage,this.dndDragImageOffsetFunction);var n=this.renderer.listen(this.elementRef.nativeElement,"drag",function(){t.renderer.addClass(t.elementRef.nativeElement,t.dndDraggingSourceClass),n()});this.dndStart.emit(e),e.stopPropagation()},e.prototype.onDragEnd=function(e){var t,n=this;switch(C.dropEffect){case"copy":t=this.dndCopied;break;case"link":t=this.dndLinked;break;case"move":t=this.dndMoved;break;default:t=this.dndCanceled}t.emit(e),this.dndEnd.emit(e),u(),this.renderer.removeClass(this.dragImage,this.dndDraggingClass),window.setTimeout(function(){n.renderer.removeClass(n.elementRef.nativeElement,n.dndDraggingSourceClass)},0),e.stopPropagation()},e.prototype.registerDragHandle=function(e){this.dndHandle=e},e.prototype.registerDragImage=function(e){this.dndDragImageElementRef=e},e.prototype.determineDragImage=function(){"undefined"!=typeof this.dndDragImageElementRef?this.dragImage=this.dndDragImageElementRef.nativeElement:this.dragImage=this.elementRef.nativeElement},e}();w.decorators=[{type:t.Directive,args:[{selector:"[dndDraggable]"}]}],w.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},w.propDecorators={dndDraggable:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndType:[{type:t.Input}],dndDraggingClass:[{type:t.Input}],dndDraggingSourceClass:[{type:t.Input}],dndDraggableDisabledClass:[{type:t.Input}],dndDragImageOffsetFunction:[{type:t.Input}],dndStart:[{type:t.Output}],dndEnd:[{type:t.Output}],dndMoved:[{type:t.Output}],dndCopied:[{type:t.Output}],dndLinked:[{type:t.Output}],dndCanceled:[{type:t.Output}],draggable:[{type:t.HostBinding,args:["attr.draggable"]}],dndDisableIf:[{type:t.Input}],onDragStart:[{type:t.HostListener,args:["dragstart",["$event"]]}],onDragEnd:[{type:t.HostListener,args:["dragend",["$event"]]}]};var A=function(){function e(e){this.elementRef=e}return e}();A.decorators=[{type:t.Directive,args:[{selector:"[dndPlaceholderRef]"}]}],A.ctorParameters=function(){return[{type:t.ElementRef}]};var O=function(){function e(e,n,r){var d=this;this.ngZone=e,this.elementRef=n,this.renderer=r,this.dndAllowExternal=!1,this.dndHorizontal=!1,this.dndDragoverClass="dndDragover",this.dndDropzoneDisabledClass="dndDropzoneDisabled",this.dndDragover=new t.EventEmitter,this.dndDrop=new t.EventEmitter,this.placeholder=null,this.disabled=!1,this.dragEnterEventHandler=function(e){return d.onDragEnter(e)},this.dragOverEventHandler=function(e){return d.onDragOver(e)},this.dragLeaveEventHandler=function(e){return d.onDragLeave(e)}}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.disabled=!!e,this.disabled?this.renderer.addClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass):this.renderer.removeClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this.placeholder=this.tryGetPlaceholder(),null!==this.placeholder&&this.placeholder.remove(),this.ngZone.runOutsideAngular(function(){e.elementRef.nativeElement.addEventListener("dragenter",e.dragEnterEventHandler),e.elementRef.nativeElement.addEventListener("dragover",e.dragOverEventHandler),e.elementRef.nativeElement.addEventListener("dragleave",e.dragLeaveEventHandler)})},e.prototype.ngOnDestroy=function(){this.elementRef.nativeElement.removeEventListener("dragenter",this.dragEnterEventHandler),this.elementRef.nativeElement.removeEventListener("dragover",this.dragOverEventHandler),this.elementRef.nativeElement.removeEventListener("dragleave",this.dragLeaveEventHandler)},e.prototype.onDragEnter=function(e){if(!0!==e._dndDropzoneActive){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);this.elementRef.nativeElement.contains(t)&&(e._dndDropzoneActive=!0)}var n=v(e);!1!==this.isDropAllowed(n)&&e.preventDefault()}else this.cleanupDragoverState()},e.prototype.onDragOver=function(e){if(!e.defaultPrevented){var t=v(e);if(!1!==this.isDropAllowed(t)){this.checkAndUpdatePlaceholderPosition(e);var n=h(e,this.dndEffectAllowed);"none"!==n?(e.preventDefault(),c(e,n),this.dndDragover.emit(e),this.renderer.addClass(this.elementRef.nativeElement,this.dndDragoverClass)):this.cleanupDragoverState()}}},e.prototype.onDrop=function(e){try{var t=v(e);if(!1===this.isDropAllowed(t))return;var n=i(e,m());if(!1===this.isDropAllowed(n.type))return;e.preventDefault();var r=h(e);if(c(e,r),"none"===r)return;var d=this.getPlaceholderIndex();this.dndDrop.emit({event:e,dropEffect:r,isExternal:m(),data:n.data,index:d}),e.stopPropagation()}finally{this.cleanupDragoverState()}},e.prototype.onDragLeave=function(e){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);if(this.elementRef.nativeElement.contains(t))return void(e._dndDropzoneActive=!0)}this.cleanupDragoverState(),c(e,"none")},e.prototype.tryGetPlaceholder=function(){return"undefined"!=typeof this.dndPlaceholderRef?this.dndPlaceholderRef.elementRef.nativeElement:this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]")},e.prototype.isDropAllowed=function(e){if(!0===this.disabled)return!1;if(!0===m()&&!1===this.dndAllowExternal)return!1;if(!this.dndDropzone)return!0;if(!e)return!0;if(!1===Array.isArray(this.dndDropzone))throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!");return-1!==this.dndDropzone.indexOf(e)},e.prototype.checkAndUpdatePlaceholderPosition=function(e){if(null!==this.placeholder){this.placeholder.parentNode!==this.elementRef.nativeElement&&this.renderer.appendChild(this.elementRef.nativeElement,this.placeholder);var t=s(this.elementRef.nativeElement,e.target);null!==t&&t!==this.placeholder&&(l(e,t,this.dndHorizontal)?t.previousSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t):t.nextSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t.nextSibling))}},e.prototype.getPlaceholderIndex=function(){if(null===this.placeholder)return undefined;var e=this.elementRef.nativeElement;return Array.prototype.indexOf.call(e.children,this.placeholder)},e.prototype.cleanupDragoverState=function(){this.renderer.removeClass(this.elementRef.nativeElement,this.dndDragoverClass),null!==this.placeholder&&this.placeholder.remove()},e}();O.decorators=[{type:t.Directive,args:[{selector:"[dndDropzone]"}]}],O.ctorParameters=function(){return[{type:t.NgZone},{type:t.ElementRef},{type:t.Renderer2}]},O.propDecorators={dndDropzone:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndAllowExternal:[{type:t.Input}],dndHorizontal:[{type:t.Input}],dndDragoverClass:[{type:t.Input}],dndDropzoneDisabledClass:[{type:t.Input}],dndDragover:[{type:t.Output}],dndDrop:[{type:t.Output}],dndPlaceholderRef:[{type:t.ContentChild,args:[A]}],dndDisableIf:[{type:t.Input}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}]};var P=function(){function e(e){this.draggable=!0,e.registerDragHandle(this)}return e.prototype.onDragEvent=function(e){e._dndUsingHandle=!0},e}();P.decorators=[{type:t.Directive,args:[{selector:"[dndHandle]"}]}],P.ctorParameters=function(){return[{type:w}]},P.propDecorators={draggable:[{type:t.HostBinding,args:["attr.draggable"]}],onDragEvent:[{type:t.HostListener,args:["dragstart",["$event"]]},{type:t.HostListener,args:["dragend",["$event"]]}]};var H=function(){function e(){}return e}();H.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[w,O,P,A,I],exports:[w,O,P,A,I]}]}],H.ctorParameters=function(){return[]},e.DndDragImageRefDirective=I,e.DndDraggableDirective=w,e.DndPlaceholderRefDirective=A,e.DndDropzoneDirective=O,e.DndHandleDirective=P,e.DndModule=H,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-drag-drop.umd.min.js.map

dnd-dropzone.directive.d.ts

@@ -1,2 +0,2 @@
-import { AfterViewInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from "@angular/core";
 import { DndEvent } from "./dnd-utils";
@@ -15,3 +15,4 @@ import { DropEffect, EffectAllowed } from "./dnd-types";
 }
-export declare class DndDropzoneDirective implements AfterViewInit {
+export declare class DndDropzoneDirective implements AfterViewInit, OnDestroy {
+    private ngZone;
     private elementRef;
@@ -30,5 +31,9 @@ private renderer;
     private disabled;
+    private readonly dragEnterEventHandler;
+    private readonly dragOverEventHandler;
+    private readonly dragLeaveEventHandler;
     dndDisableIf: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(ngZone: NgZone, elementRef: ElementRef, renderer: Renderer2);
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     onDragEnter(event: DndEvent): void;
@@ -35,0 +40,0 @@ onDragOver(event: DragEvent): void;

ngx-drag-drop.es5.js

@@ -1,2 +0,2 @@
-import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
+import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, Renderer2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -454,6 +454,9 @@ var DROP_EFFECTS = (["move", "copy", "link"]);
     /**
+     * @param {?} ngZone
      * @param {?} elementRef
      * @param {?} renderer
      */
-    function DndDropzoneDirective(elementRef, renderer) {
+    function DndDropzoneDirective(ngZone, elementRef, renderer) {
+        var _this = this;
+        this.ngZone = ngZone;
         this.elementRef = elementRef;
@@ -469,2 +472,5 @@ this.renderer = renderer;
         this.disabled = false;
+        this.dragEnterEventHandler = function (event) { return _this.onDragEnter(event); };
+        this.dragOverEventHandler = function (event) { return _this.onDragOver(event); };
+        this.dragLeaveEventHandler = function (event) { return _this.onDragLeave(event); };
     }
@@ -492,2 +498,3 @@ Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", {
     DndDropzoneDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.placeholder = this.tryGetPlaceholder();
@@ -497,4 +504,17 @@ if (this.placeholder !== null) {
         }
+        this.ngZone.runOutsideAngular(function () {
+            _this.elementRef.nativeElement.addEventListener("dragenter", _this.dragEnterEventHandler);
+            _this.elementRef.nativeElement.addEventListener("dragover", _this.dragOverEventHandler);
+            _this.elementRef.nativeElement.addEventListener("dragleave", _this.dragLeaveEventHandler);
+        });
     };
     /**
+     * @return {?}
+     */
+    DndDropzoneDirective.prototype.ngOnDestroy = function () {
+        this.elementRef.nativeElement.removeEventListener("dragenter", this.dragEnterEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragover", this.dragOverEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragleave", this.dragLeaveEventHandler);
+    };
+    /**
      * @param {?} event
@@ -529,2 +549,10 @@ * @return {?}
     DndDropzoneDirective.prototype.onDragOver = function (event) {
+        // With nested dropzones, we want to ignore this event if a child dropzone
+        // has already handled a dragover.  Historically, event.stopPropagation() was
+        // used to prevent this bubbling, but that prevents any dragovers outside the
+        // ngx-drag-drop component, and stops other use cases such as scrolling on drag.
+        // Instead, we can check if the event was already prevented by a child and bail early.
+        if (event.defaultPrevented) {
+            return;
+        }
         // check if this drag event is allowed to drop on this dropzone
@@ -547,3 +575,2 @@ var /** @type {?} */ type = getDndType(event);
         this.renderer.addClass(this.elementRef.nativeElement, this.dndDragoverClass);
-        event.stopPropagation();
     };
@@ -706,2 +733,3 @@ /**
 DndDropzoneDirective.ctorParameters = function () { return [
+    { type: NgZone, },
     { type: ElementRef, },
@@ -721,6 +749,3 @@ { type: Renderer2, },
     'dndDisableIf': [{ type: Input },],
-    'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
-    'onDragOver': [{ type: HostListener, args: ["dragover", ["$event"],] },],
     'onDrop': [{ type: HostListener, args: ["drop", ["$event"],] },],
-    'onDragLeave': [{ type: HostListener, args: ["dragleave", ["$event"],] },],
 };
@@ -727,0 +752,0 @@ var DndHandleDirective = /** @class */ (function () {

ngx-drag-drop.js

@@ -1,2 +0,2 @@
-import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
+import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, Renderer2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -449,6 +449,8 @@
     /**
+     * @param {?} ngZone
      * @param {?} elementRef
      * @param {?} renderer
      */
-    constructor(elementRef, renderer) {
+    constructor(ngZone, elementRef, renderer) {
+        this.ngZone = ngZone;
         this.elementRef = elementRef;
@@ -464,2 +466,5 @@ this.renderer = renderer;
         this.disabled = false;
+        this.dragEnterEventHandler = (event) => this.onDragEnter(event);
+        this.dragOverEventHandler = (event) => this.onDragOver(event);
+        this.dragLeaveEventHandler = (event) => this.onDragLeave(event);
     }
@@ -487,4 +492,17 @@ /**
         }
+        this.ngZone.runOutsideAngular(() => {
+            this.elementRef.nativeElement.addEventListener("dragenter", this.dragEnterEventHandler);
+            this.elementRef.nativeElement.addEventListener("dragover", this.dragOverEventHandler);
+            this.elementRef.nativeElement.addEventListener("dragleave", this.dragLeaveEventHandler);
+        });
     }
     /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.elementRef.nativeElement.removeEventListener("dragenter", this.dragEnterEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragover", this.dragOverEventHandler);
+        this.elementRef.nativeElement.removeEventListener("dragleave", this.dragLeaveEventHandler);
+    }
+    /**
      * @param {?} event
@@ -519,2 +537,10 @@ * @return {?}
     onDragOver(event) {
+        // With nested dropzones, we want to ignore this event if a child dropzone
+        // has already handled a dragover.  Historically, event.stopPropagation() was
+        // used to prevent this bubbling, but that prevents any dragovers outside the
+        // ngx-drag-drop component, and stops other use cases such as scrolling on drag.
+        // Instead, we can check if the event was already prevented by a child and bail early.
+        if (event.defaultPrevented) {
+            return;
+        }
         // check if this drag event is allowed to drop on this dropzone
@@ -537,3 +563,2 @@ const /** @type {?} */ type = getDndType(event);
         this.renderer.addClass(this.elementRef.nativeElement, this.dndDragoverClass);
-        event.stopPropagation();
     }
@@ -695,2 +720,3 @@ /**
 DndDropzoneDirective.ctorParameters = () => [
+    { type: NgZone, },
     { type: ElementRef, },
@@ -710,6 +736,3 @@ { type: Renderer2, },
     'dndDisableIf': [{ type: Input },],
-    'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
-    'onDragOver': [{ type: HostListener, args: ["dragover", ["$event"],] },],
     'onDrop': [{ type: HostListener, args: ["drop", ["$event"],] },],
-    'onDragLeave': [{ type: HostListener, args: ["dragleave", ["$event"],] },],
 };
@@ -716,0 +739,0 @@

ngx-drag-drop.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"DndDragImageRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}],"registerDragHandle":[{"__symbolic":"method"}],"registerDragImage":[{"__symbolic":"method"}],"determineDragImage":[{"__symbolic":"method"}]}},"DndDropEvent":{"__symbolic":"interface"},"DndPlaceholderRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndPlaceholderRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"DndPlaceholderRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}],"tryGetPlaceholder":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}},"DropEffect":{"__symbolic":"interface"},"EffectAllowed":{"__symbolic":"interface"},"DndDragImageOffsetFunction":{"__symbolic":"interface"},"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"members":{}}},"origins":{"DndDragImageRefDirective":"./dnd-draggable.directive","DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndPlaceholderRefDirective":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DropEffect":"./dnd-types","EffectAllowed":"./dnd-types","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"}
+{"__symbolic":"module","version":3,"metadata":{"DndDragImageRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}],"registerDragHandle":[{"__symbolic":"method"}],"registerDragImage":[{"__symbolic":"method"}],"determineDragImage":[{"__symbolic":"method"}]}},"DndDropEvent":{"__symbolic":"interface"},"DndPlaceholderRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndPlaceholderRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"DndPlaceholderRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method"}],"tryGetPlaceholder":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}},"DropEffect":{"__symbolic":"interface"},"EffectAllowed":{"__symbolic":"interface"},"DndDragImageOffsetFunction":{"__symbolic":"interface"},"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"members":{}}},"origins":{"DndDragImageRefDirective":"./dnd-draggable.directive","DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndPlaceholderRefDirective":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DropEffect":"./dnd-types","EffectAllowed":"./dnd-types","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"}

package.json

@@ -1,1 +0,1 @@
-{"name":"ngx-drag-drop","version":"1.0.3","description":"Angular directives using the native HTML Drag And Drop API","repository":{"type":"git","url":"https://github.com/reppners/ngx-drag-drop.git"},"homepage":"https://reppners.github.io/ngx-drag-drop/","author":{"name":"Stefan Steinhart","email":"[e-mail]"},"license":"MIT","keywords":["angular","html","drag","drop","dragdrop","dragndrop","dnd","directive","touch"],"main":"bundles/ngx-drag-drop.umd.js","scripts":{"ng":"ng","start":"npm run build:lib && ng serve --disable-host-check --host 0.0.0.0","workaround":"rm -rf node_modules/ngx-drag-drop && cp -R dist node_modules/ngx-drag-drop","build:docs":"ng build --prod","build:lib":"ng-packagr -p ng-package.json && npm run workaround","publish:stable":"npm publish dist","publish:next":"npm publish dist --tag next","test":"ng test","lint":"ng lint","e2e":"ng e2e"},"devDependencies":{"@angular/animations":"^5.2.0","@angular/cdk":"^5.0.4","@angular/cli":"^1.6.4","@angular/common":"^5.2.0","@angular/compiler":"^5.2.0","@angular/compiler-cli":"^5.2.0","@angular/core":"^5.2.0","@angular/flex-layout":"^2.0.0-beta.12","@angular/forms":"^5.2.0","@angular/http":"^5.2.0","@angular/material":"^5.0.4","@angular/platform-browser":"^5.2.0","@angular/platform-browser-dynamic":"^5.2.0","@angular/router":"^5.2.0","@types/jasmine":"2.5.38","@types/node":"~6.0.60","codelyzer":"^4.0.2","core-js":"^2.5.3","hammerjs":"^2.0.8","jasmine-core":"~2.5.2","jasmine-spec-reporter":"~3.2.0","karma":"~1.4.1","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^0.2.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","mobile-drag-drop":"^2.1.0","ng-packagr":"^1.6.0","protractor":"~5.1.0","run-sequence":"^1.2.2","rxjs":"^5.5.6","ts-node":"~2.0.0","tslint":"^5.9.1","typescript":"^2.6.2","zone.js":"^0.8.20"},"peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0","rxjs":"^5.1.0","zone.js":"^0.8.4"},"engines":{"node":">=6.0.0"},"module":"ngx-drag-drop.es5.js","es2015":"ngx-drag-drop.js","typings":"ngx-drag-drop.d.ts","metadata":"ngx-drag-drop.metadata.json"}
+{"name":"ngx-drag-drop","version":"2.0.0-rc.0","description":"Angular directives using the native HTML Drag And Drop API","repository":{"type":"git","url":"https://github.com/reppners/ngx-drag-drop.git"},"homepage":"https://reppners.github.io/ngx-drag-drop/","author":{"name":"Stefan Steinhart","email":"[e-mail]"},"license":"MIT","keywords":["angular","html","drag","drop","dragdrop","dragndrop","dnd","directive","touch"],"main":"bundles/ngx-drag-drop.umd.js","scripts":{"ng":"ng","start":"npm run build:lib && ng serve --disable-host-check --host 0.0.0.0","workaround":"rm -rf node_modules/ngx-drag-drop && cp -R dist node_modules/ngx-drag-drop","build:docs":"ng build --prod","build:lib":"ng-packagr -p ng-package.json && npm run workaround","publish:stable":"npm publish dist","publish:next":"npm publish dist --tag next","test":"ng test","lint":"ng lint","e2e":"ng e2e"},"devDependencies":{"@angular/animations":"^5.2.0","@angular/cdk":"^5.0.4","@angular/cli":"^1.6.4","@angular/common":"^5.2.0","@angular/compiler":"^5.2.0","@angular/compiler-cli":"^5.2.0","@angular/core":"^5.2.0","@angular/flex-layout":"^2.0.0-beta.12","@angular/forms":"^5.2.0","@angular/http":"^5.2.0","@angular/material":"^5.0.4","@angular/platform-browser":"^5.2.0","@angular/platform-browser-dynamic":"^5.2.0","@angular/router":"^5.2.0","@types/jasmine":"2.5.38","@types/node":"~6.0.60","codelyzer":"^4.0.2","core-js":"^2.5.3","hammerjs":"^2.0.8","jasmine-core":"~2.5.2","jasmine-spec-reporter":"~3.2.0","karma":"~1.4.1","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^0.2.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","mobile-drag-drop":"^2.1.0","ng-packagr":"^1.6.0","protractor":"~5.1.0","run-sequence":"^1.2.2","rxjs":"^5.5.6","ts-node":"~2.0.0","tslint":"^5.9.1","typescript":"^2.6.2","zone.js":"^0.8.20"},"peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0 || ^6.0.0"},"engines":{"node":">=8.9.0"},"module":"ngx-drag-drop.es5.js","es2015":"ngx-drag-drop.js","typings":"ngx-drag-drop.d.ts","metadata":"ngx-drag-drop.metadata.json"}

README.md

@@ -20,3 +20,3 @@ [![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)
 * custom CSS classes
-* touch support by using a [polyfill](https://github.com/timruffles/ios-html5-drag-drop-shim)
+* touch support by using a [polyfill](#touch-support)
 * [AOT](https://angular.io/guide/aot-compiler) compatible
@@ -29,2 +29,12 @@
 
+
+**Upcoming version release**
+
+Currently the next version including some performance optimizations is pending. See the [CHANGELOG](https://github.com/reppners/ngx-drag-drop/blob/master/CHANGELOG.md) for details.
+
+You can try it out by installing the `next` version.
+
+`npm install ngx-drag-drop@next --save`
+
+
 ## Usage
@@ -280,2 +290,27 @@
 
+## Touch support
+
+Install the `mobile-drag-drop` module available on npm.
+
+Add the following lines to your js code
+```JS
+import { polyfill } from 'mobile-drag-drop';
+// optional import of scroll behaviour
+import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
+
+polyfill( {
+  // use this to make use of the scroll behaviour
+  dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride
+} );
+
+// workaround to make scroll prevent work in iOS Safari > 10
+try {
+  window.addEventListener( "touchmove", function() { }, { passive: false } );
+}
+catch(e){}
+```
+
+For more info on the polyfill check it out on GitHub
+https://github.com/timruffles/mobile-drag-drop
+
 ### Why?
@@ -282,0 +317,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

336504

increased by4.64%

Dependency count

1

decreased by-66.67%

Lines of code

2612

increased by3.2%

Number of lines in readme file

342

increased by11.4%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes