drag-enabled - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

bundles/drag-enabled.umd.js

@@ -41,4 +41,4 @@ (function (global, factory) {
                 node: this.el.nativeElement,
-                cursorX: event.pageX ? event.pageX : event.clientX,
-                cursorY: event.pageY ? event.pageY : event.clientY,
+                clientX: event.clientX,
+                clientY: event.clientY
             }
@@ -114,3 +114,3 @@ };
         this.dragEffect = "move";
-        this.dragEnabled = function (medium) { return true; };
+        this.dragEnabled = function (event) { return true; };
         this.onDragStart = new core.EventEmitter();
@@ -123,12 +123,10 @@ this.onDragEnd = new core.EventEmitter();
         var rect = this.el.nativeElement.getBoundingClientRect();
-        var X = event.pageX ? event.pageX : event.clientX;
-        var Y = event.pageY ? event.pageY : event.clientY;
         var dragEvent = {
             medium: this.medium,
             node: this.el.nativeElement,
-            cursorX: X,
-            cursorY: Y,
+            clientX: event.clientX,
+            clientY: event.clientY,
             offset: {
-                x: X - rect.left,
-                y: Y - rect.top
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top
             }
@@ -145,4 +143,4 @@ };
         var dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX;
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY;
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         if (this.dragEnabled(dragEvent)) {
@@ -155,4 +153,4 @@ this.onDrag.emit(dragEvent);
         var dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX;
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY;
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         this.onDragEnd.emit(dragEvent);
@@ -159,0 +157,0 @@ this.renderer.setElementClass(this.el.nativeElement, "drag-over", false);

bundles/drag-enabled.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["drag-enabled"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var r=function(){function e(){this.data={}}return e.prototype.setData=function(e,t){this.data[e]=t},e.prototype.getData=function(e){return this.data[e]},e}();r.decorators=[{type:n.Injectable}],r.ctorParameters=function(){return[]};var a=function(){function e(e,t,r){this.dataTransfer=e,this.renderer=t,this.el=r,this.dropEffect="move",this.dropEnabled=function(e){return!0},this.onDragEnter=new n.EventEmitter,this.onDragLeave=new n.EventEmitter,this.onDrop=new n.EventEmitter,this.onDragOver=new n.EventEmitter}return e.prototype.createDropEvent=function(e){return{source:this.dataTransfer.getData("source"),destination:{medium:this.medium,node:this.el.nativeElement,cursorX:e.pageX?e.pageX:e.clientX,cursorY:e.pageY?e.pageY:e.clientY}}},e.prototype.drop=function(e){e.preventDefault();var t=this.createDropEvent(e);this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1),this.dropEnabled(t)&&this.onDrop.emit(t)},e.prototype.dragEnter=function(e){e.preventDefault();var t=this.createDropEvent(e);this.dropEnabled(t)?(e.dataTransfer.dropEffect=this.dropEffect,this.renderer.setElementClass(this.el.nativeElement,"drag-over",!0),this.onDragEnter.emit(t)):this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e.prototype.dragLeave=function(e){e.preventDefault(),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1),this.onDragLeave.emit(e)},e.prototype.dragOver=function(e){var t=this.createDropEvent(e);this.dropEnabled(t)?(e.preventDefault(),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!0),this.onDragOver.emit(t)):this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e}();a.decorators=[{type:n.Directive,args:[{selector:"[dropEnabled]"}]}],a.ctorParameters=function(){return[{type:r},{type:n.Renderer},{type:n.ElementRef}]},a.propDecorators={medium:[{type:n.Input,args:["medium"]}],dropEffect:[{type:n.Input}],dropEnabled:[{type:n.Input,args:["dropEnabled"]}],onDragEnter:[{type:n.Output}],onDragLeave:[{type:n.Output}],onDrop:[{type:n.Output}],onDragOver:[{type:n.Output}],drop:[{type:n.HostListener,args:["drop",["$event"]]}],dragEnter:[{type:n.HostListener,args:["dragenter",["$event"]]}],dragLeave:[{type:n.HostListener,args:["dragleave",["$event"]]}],dragOver:[{type:n.HostListener,args:["dragover",["$event"]]}]};var o=function(){function e(e,t,r){this.dataTransfer=e,this.renderer=t,this.el=r,this.dragEffect="move",this.dragEnabled=function(e){return!0},this.onDragStart=new n.EventEmitter,this.onDragEnd=new n.EventEmitter,this.onDrag=new n.EventEmitter}return e.prototype.dragStart=function(e){e.stopPropagation();var t=this.el.nativeElement.getBoundingClientRect(),r=e.pageX?e.pageX:e.clientX,n=e.pageY?e.pageY:e.clientY,a={medium:this.medium,node:this.el.nativeElement,cursorX:r,cursorY:n,offset:{x:r-t.left,y:n-t.top}};this.dragEnabled(a)&&(e.dataTransfer.effectAllowed=this.dragEffect,e.dataTransfer.setData("makeItTick","true"),this.dataTransfer.setData("source",a),this.onDragStart.emit(a))},e.prototype.drag=function(e){var t=this.dataTransfer.getData("source");t.cursorX=e.pageX?e.pageX:e.clientX,t.cursorY=e.pageY?e.pageY:e.clientY,this.dragEnabled(t)&&this.onDrag.emit(t)},e.prototype.dragEnd=function(e){e.stopPropagation();var t=this.dataTransfer.getData("source");t.cursorX=e.pageX?e.pageX:e.clientX,t.cursorY=e.pageY?e.pageY:e.clientY,this.onDragEnd.emit(t),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e}();o.decorators=[{type:n.Directive,args:[{selector:"[dragEnabled]",host:{"[draggable]":"true"}}]}],o.ctorParameters=function(){return[{type:r},{type:n.Renderer},{type:n.ElementRef}]},o.propDecorators={medium:[{type:n.Input,args:["medium"]}],dragEffect:[{type:n.Input,args:["dragEffect"]}],dragEnabled:[{type:n.Input,args:["dragEnabled"]}],onDragStart:[{type:n.Output}],onDragEnd:[{type:n.Output}],onDrag:[{type:n.Output}],dragStart:[{type:n.HostListener,args:["dragstart",["$event"]]}],drag:[{type:n.HostListener,args:["drag",["$event"]]}],dragEnd:[{type:n.HostListener,args:["dragend",["$event"]]}]};var s=function(){};s.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],declarations:[o,a],exports:[o,a],entryComponents:[],providers:[o,a,r],schemas:[n.CUSTOM_ELEMENTS_SCHEMA]}]}],s.ctorParameters=function(){return[]},e.DropDirective=a,e.DragDirective=o,e.DragDropModule=s,e.ɵa=r,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["drag-enabled"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var r=function(){function e(){this.data={}}return e.prototype.setData=function(e,t){this.data[e]=t},e.prototype.getData=function(e){return this.data[e]},e}();r.decorators=[{type:n.Injectable}],r.ctorParameters=function(){return[]};var a=function(){function e(e,t,r){this.dataTransfer=e,this.renderer=t,this.el=r,this.dropEffect="move",this.dropEnabled=function(e){return!0},this.onDragEnter=new n.EventEmitter,this.onDragLeave=new n.EventEmitter,this.onDrop=new n.EventEmitter,this.onDragOver=new n.EventEmitter}return e.prototype.createDropEvent=function(e){return{source:this.dataTransfer.getData("source"),destination:{medium:this.medium,node:this.el.nativeElement,clientX:e.clientX,clientY:e.clientY}}},e.prototype.drop=function(e){e.preventDefault();var t=this.createDropEvent(e);this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1),this.dropEnabled(t)&&this.onDrop.emit(t)},e.prototype.dragEnter=function(e){e.preventDefault();var t=this.createDropEvent(e);this.dropEnabled(t)?(e.dataTransfer.dropEffect=this.dropEffect,this.renderer.setElementClass(this.el.nativeElement,"drag-over",!0),this.onDragEnter.emit(t)):this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e.prototype.dragLeave=function(e){e.preventDefault(),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1),this.onDragLeave.emit(e)},e.prototype.dragOver=function(e){var t=this.createDropEvent(e);this.dropEnabled(t)?(e.preventDefault(),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!0),this.onDragOver.emit(t)):this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e}();a.decorators=[{type:n.Directive,args:[{selector:"[dropEnabled]"}]}],a.ctorParameters=function(){return[{type:r},{type:n.Renderer},{type:n.ElementRef}]},a.propDecorators={medium:[{type:n.Input,args:["medium"]}],dropEffect:[{type:n.Input}],dropEnabled:[{type:n.Input,args:["dropEnabled"]}],onDragEnter:[{type:n.Output}],onDragLeave:[{type:n.Output}],onDrop:[{type:n.Output}],onDragOver:[{type:n.Output}],drop:[{type:n.HostListener,args:["drop",["$event"]]}],dragEnter:[{type:n.HostListener,args:["dragenter",["$event"]]}],dragLeave:[{type:n.HostListener,args:["dragleave",["$event"]]}],dragOver:[{type:n.HostListener,args:["dragover",["$event"]]}]};var o=function(){function e(e,t,r){this.dataTransfer=e,this.renderer=t,this.el=r,this.dragEffect="move",this.dragEnabled=function(e){return!0},this.onDragStart=new n.EventEmitter,this.onDragEnd=new n.EventEmitter,this.onDrag=new n.EventEmitter}return e.prototype.dragStart=function(e){e.stopPropagation();var t=this.el.nativeElement.getBoundingClientRect(),r={medium:this.medium,node:this.el.nativeElement,clientX:e.clientX,clientY:e.clientY,offset:{x:e.clientX-t.left,y:e.clientY-t.top}};this.dragEnabled(r)&&(e.dataTransfer.effectAllowed=this.dragEffect,e.dataTransfer.setData("makeItTick","true"),this.dataTransfer.setData("source",r),this.onDragStart.emit(r))},e.prototype.drag=function(e){var t=this.dataTransfer.getData("source");t.clientX=e.clientX,t.clientY=e.clientY,this.dragEnabled(t)&&this.onDrag.emit(t)},e.prototype.dragEnd=function(e){e.stopPropagation();var t=this.dataTransfer.getData("source");t.clientX=e.clientX,t.clientY=e.clientY,this.onDragEnd.emit(t),this.renderer.setElementClass(this.el.nativeElement,"drag-over",!1)},e}();o.decorators=[{type:n.Directive,args:[{selector:"[dragEnabled]",host:{"[draggable]":"true"}}]}],o.ctorParameters=function(){return[{type:r},{type:n.Renderer},{type:n.ElementRef}]},o.propDecorators={medium:[{type:n.Input,args:["medium"]}],dragEffect:[{type:n.Input,args:["dragEffect"]}],dragEnabled:[{type:n.Input,args:["dragEnabled"]}],onDragStart:[{type:n.Output}],onDragEnd:[{type:n.Output}],onDrag:[{type:n.Output}],dragStart:[{type:n.HostListener,args:["dragstart",["$event"]]}],drag:[{type:n.HostListener,args:["drag",["$event"]]}],dragEnd:[{type:n.HostListener,args:["dragend",["$event"]]}]};var i=function(){};i.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],declarations:[o,a],exports:[o,a],entryComponents:[],providers:[o,a,r],schemas:[n.CUSTOM_ELEMENTS_SCHEMA]}]}],i.ctorParameters=function(){return[]},e.DropDirective=a,e.DragDirective=o,e.DragDropModule=i,e.ɵa=r,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=drag-enabled.umd.min.js.map

drag-enabled.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"DropDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":31,"character":1},"arguments":[{"selector":"[dropEnabled]"}]}],"members":{"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5},"arguments":["medium"]}]}],"dropEffect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"dropEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5},"arguments":["dropEnabled"]}]}],"onDragEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"onDragLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"onDragOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":59,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":60,"character":20}]}],"createDropEvent":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":75,"character":5},"arguments":["drop",["$event"]]}]}],"dragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":87,"character":5},"arguments":["dragenter",["$event"]]}]}],"dragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":102,"character":5},"arguments":["dragleave",["$event"]]}]}],"dragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":110,"character":5},"arguments":["dragover",["$event"]]}]}]}},"DropEvent":{"__symbolic":"interface"},"DragDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":22,"character":1},"arguments":[{"selector":"[dragEnabled]","host":{"[draggable]":"true"}}]}],"members":{"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["medium"]}]}],"dragEffect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5},"arguments":["dragEffect"]}]}],"dragEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":5}}]}],"onDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":52,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":20}]}],"dragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["dragstart",["$event"]]}]}],"drag":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":83,"character":5},"arguments":["drag",["$event"]]}]}],"dragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":95,"character":5},"arguments":["dragend",["$event"]]}]}]}},"DragEvent":{"__symbolic":"interface"},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"}],"exports":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"}],"entryComponents":[],"providers":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"},{"__symbolic":"reference","name":"ɵa"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":26,"character":12}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setData":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}]}}},"origins":{"DropDirective":"./src/app/drag-enabled/drop.directive","DropEvent":"./src/app/drag-enabled/drop.directive","DragDirective":"./src/app/drag-enabled/drag.directive","DragEvent":"./src/app/drag-enabled/drag.directive","DragDropModule":"./src/app/drag-enabled/dragdrop.module","ɵa":"./src/app/drag-enabled/datatransfer"},"importAs":"drag-enabled"}
+{"__symbolic":"module","version":4,"metadata":{"DropDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":31,"character":1},"arguments":[{"selector":"[dropEnabled]"}]}],"members":{"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5},"arguments":["medium"]}]}],"dropEffect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"dropEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5},"arguments":["dropEnabled"]}]}],"onDragEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"onDragLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"onDragOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":59,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":60,"character":20}]}],"createDropEvent":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":75,"character":5},"arguments":["drop",["$event"]]}]}],"dragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":87,"character":5},"arguments":["dragenter",["$event"]]}]}],"dragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":102,"character":5},"arguments":["dragleave",["$event"]]}]}],"dragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":110,"character":5},"arguments":["dragover",["$event"]]}]}]}},"DropEvent":{"__symbolic":"interface"},"DragDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":22,"character":1},"arguments":[{"selector":"[dragEnabled]","host":{"[draggable]":"true"}}]}],"members":{"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["medium"]}]}],"dragEffect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5},"arguments":["dragEffect"]}]}],"dragEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":5}}]}],"onDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer","line":52,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":20}]}],"dragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["dragstart",["$event"]]}]}],"drag":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":81,"character":5},"arguments":["drag",["$event"]]}]}],"dragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":93,"character":5},"arguments":["dragend",["$event"]]}]}]}},"DragEvent":{"__symbolic":"interface"},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"}],"exports":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"}],"entryComponents":[],"providers":[{"__symbolic":"reference","name":"DragDirective"},{"__symbolic":"reference","name":"DropDirective"},{"__symbolic":"reference","name":"ɵa"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":26,"character":12}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setData":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}]}}},"origins":{"DropDirective":"./src/app/drag-enabled/drop.directive","DropEvent":"./src/app/drag-enabled/drop.directive","DragDirective":"./src/app/drag-enabled/drag.directive","DragEvent":"./src/app/drag-enabled/drag.directive","DragDropModule":"./src/app/drag-enabled/dragdrop.module","ɵa":"./src/app/drag-enabled/datatransfer"},"importAs":"drag-enabled"}

esm2015/drag-enabled.js

@@ -69,5 +69,4 @@ import { Injectable, Directive, ElementRef, HostListener, Input, Output, Renderer, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
                 node: this.el.nativeElement,
-                cursorX: event.pageX ? event.pageX : event.clientX,
-                // + document.body.scrollLeft + document.documentElement.scrollLeft
-                cursorY: event.pageY ? event.pageY : event.clientY,
+                clientX: event.clientX,
+                clientY: event.clientY
             }
@@ -173,3 +172,3 @@ };
         this.dragEffect = "move";
-        this.dragEnabled = (medium) => true;
+        this.dragEnabled = (event) => true;
         this.onDragStart = new EventEmitter();
@@ -186,12 +185,10 @@ this.onDragEnd = new EventEmitter();
         const /** @type {?} */ rect = this.el.nativeElement.getBoundingClientRect();
-        const /** @type {?} */ X = event.pageX ? event.pageX : event.clientX; // + document.body.scrollLeft + document.documentElement.scrollLeft
-        const /** @type {?} */ Y = event.pageY ? event.pageY : event.clientY; // + document.body.scrollTop + document.documentElement.scrollTop
         const /** @type {?} */ dragEvent = {
             medium: this.medium,
             node: this.el.nativeElement,
-            cursorX: X,
-            cursorY: Y,
+            clientX: event.clientX,
+            clientY: event.clientY,
             offset: {
-                x: X - rect.left,
-                y: Y - rect.top
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top
             }
@@ -212,4 +209,4 @@ };
         const /** @type {?} */ dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX; // + document.body.scrollLeft + document.documentElement.scrollLeft
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY; // + document.body.scrollTop + document.documentElement.scrollTop
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         if (this.dragEnabled(dragEvent)) {
@@ -226,4 +223,4 @@ this.onDrag.emit(dragEvent);
         const /** @type {?} */ dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX; // + document.body.scrollLeft + document.documentElement.scrollLeft
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY; // + document.body.scrollTop + document.documentElement.scrollTop
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         this.onDragEnd.emit(dragEvent);
@@ -230,0 +227,0 @@ this.renderer.setElementClass(this.el.nativeElement, "drag-over", false);

esm5/drag-enabled.js

@@ -38,4 +38,4 @@ import { Injectable, Directive, ElementRef, HostListener, Input, Output, Renderer, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
                 node: this.el.nativeElement,
-                cursorX: event.pageX ? event.pageX : event.clientX,
-                cursorY: event.pageY ? event.pageY : event.clientY,
+                clientX: event.clientX,
+                clientY: event.clientY
             }
@@ -111,3 +111,3 @@ };
         this.dragEffect = "move";
-        this.dragEnabled = function (medium) { return true; };
+        this.dragEnabled = function (event) { return true; };
         this.onDragStart = new EventEmitter();
@@ -120,12 +120,10 @@ this.onDragEnd = new EventEmitter();
         var rect = this.el.nativeElement.getBoundingClientRect();
-        var X = event.pageX ? event.pageX : event.clientX;
-        var Y = event.pageY ? event.pageY : event.clientY;
         var dragEvent = {
             medium: this.medium,
             node: this.el.nativeElement,
-            cursorX: X,
-            cursorY: Y,
+            clientX: event.clientX,
+            clientY: event.clientY,
             offset: {
-                x: X - rect.left,
-                y: Y - rect.top
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top
             }
@@ -142,4 +140,4 @@ };
         var dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX;
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY;
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         if (this.dragEnabled(dragEvent)) {
@@ -152,4 +150,4 @@ this.onDrag.emit(dragEvent);
         var dragEvent = this.dataTransfer.getData("source");
-        dragEvent.cursorX = event.pageX ? event.pageX : event.clientX;
-        dragEvent.cursorY = event.pageY ? event.pageY : event.clientY;
+        dragEvent.clientX = event.clientX;
+        dragEvent.clientY = event.clientY;
         this.onDragEnd.emit(dragEvent);
@@ -156,0 +154,0 @@ this.renderer.setElementClass(this.el.nativeElement, "drag-over", false);

package.json

 {
   "name": "drag-enabled",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -9,6 +9,6 @@
 
-You will be able to pass a medium object to the directives. The meduim will supposedly have or know of certain things that can help your code make a decision on allowing a drag or a drop to take place. It could be a reference to a node or a structure in your code. At the start, a "dragEnabled" requst with a DragEvent will be sent to your component. if returned true, dragging begins. At the end of drag operation, an event with the source medium, source HTMLElement, destination medium, and destination HTMLElement will be sent to your component to perform any action necessary.
+You will be able to pass a medium object to the directives. The medium will supposedly have or know of certain things that can help your code make a decision on allowing a drag or a drop to take place. It could be a reference to a node or a structure in your code. At the start, a "dragEnabled" requst with a DragEvent will be sent to your component. if returned true, dragging begins. At the end of drag operation, an event with the source medium, source HTMLElement, destination medium, and destination HTMLElement will be sent to your component to perform any action necessary.
 
-# Version 0.1.1
-Turned out that this library can become a lot more usefull if i pass the event location as well. So here it is... Made the new attributes optional to make it compatible for those who are using previous version if they get an accidental upgrade through npm install... cursorX, cursorY names are chosen to avoid confusion over browser compatibility between Mozilla, and other browsers..
+# Version 0.1.2
+Turned out that this library can become a lot more useful if I pass the event location as well. So here it is... Made the new attributes optional to make it compatible for those who are using previous version if they get an accidental upgrade through npm install...
 ```
@@ -18,4 +18,4 @@ export interface DragEvent {
     node: HTMLElement,
-    cursorX?: number,
-    cursorY?: number,
+    clientX?: number,
+    clientY?: number,
     offset?: {
@@ -31,4 +31,4 @@ x: number,
 		node: HTMLElement,
-		cursorX?: number,
-		cursorY?: number,
+		clientX?: number,
+		clientY?: number,
 		offset?: {
@@ -42,4 +42,4 @@ x: number,
         node: HTMLElement,
-		cursorX?: number,
-		cursorY?: number
+		clientX?: number,
+		clientY?: number
     }
@@ -46,0 +46,0 @@ }

src/app/drag-enabled/drag.directive.d.ts

@@ -6,4 +6,4 @@ import { ElementRef, EventEmitter, Renderer } from '@angular/core';
     node: HTMLElement;
-    cursorX?: number;
-    cursorY?: number;
+    clientX?: number;
+    clientY?: number;
     offset?: {
@@ -20,3 +20,3 @@ x: number;
     dragEffect: string;
-    dragEnabled: (medium: any) => boolean;
+    dragEnabled: (event: any) => boolean;
     onDragStart: EventEmitter<any>;
@@ -23,0 +23,0 @@ onDragEnd: EventEmitter<any>;

src/app/drag-enabled/drop.directive.d.ts

@@ -7,4 +7,4 @@ import { ElementRef, Renderer, EventEmitter } from '@angular/core';
         node: HTMLElement;
-        cursorX?: number;
-        cursorY?: number;
+        clientX?: number;
+        clientY?: number;
         offset?: {
@@ -18,4 +18,4 @@ x: number;
         node: HTMLElement;
-        cursorX?: number;
-        cursorY?: number;
+        clientX?: number;
+        clientY?: number;
     };
@@ -22,0 +22,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

113496

decreased by-5.52%

Lines of code

806

decreased by-0.98%

No dependency changes