ngx-drag-and-drop
Version:
Angular library that allow you to build drag and drop without the native HTML5 API
16 lines (14 loc) • 13.3 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-drag-and-drop",["exports","@angular/core","@angular/common"],e):e((t=t||self)["ngx-drag-and-drop"]={},t.ng.core,t.ng.common)}(this,(function(t,e,o){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function r(t,e,o,r){var n,i=arguments.length,s=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(s=(i<3?n(s):i>3?n(e,o,s):n(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s}var n=document;n.elementsFromPoint=n.elementsFromPoint||function(t,e){for(var o,r=[],n=[];(o=document.elementFromPoint(t,e))&&o!==document.documentElement;)n.push(o),r.push(o.style.visibility),o.style.visibility="hidden";for(var i=0;i<n.length;i++)n[i].style.visibility=r[i];return n};var i=new(function(){function t(){this.draggingPointer=new Map,this.draggedStructures=new Map,this.dropZones=new Map}return t.prototype.preStartDrag=function(t,e,o,r,n){var i=this;return this.draggingPointer.set(t,{x:e,y:o}),new Promise((function(s,a){setTimeout((function(){var r=i.draggingPointer.get(t),d=r&&Math.abs(e-r.x)+Math.abs(o-r.y)<n;i.draggingPointer.delete(t),d?s():a()}),Math.max(0,r))}))},t.prototype.startDrag=function(t,e){this.draggedStructures.set(t,e);var o=new Map;return this.dropZones.forEach((function(r){r.checkAccept(e)&&(r.appendDropCandidatePointer(t),o.set(r.root,r))})),o},t.prototype.isAssociatedToDropZone=function(t){return this.dropZones.has(t)},t.prototype.registerDropZone=function(t){this.dropZones.set(t.root,t)},t.prototype.unregisterDropZone=function(t){this.dropZones.delete(t.root)},t.prototype.pointerMove=function(t,e,o){var r=this.draggingPointer.get(t);r&&(r.x=e,r.y=o);var n=this.draggedStructures.get(t);return n&&n instanceof p&&n.move(e,o),void 0!==n},t.prototype.pointerRelease=function(t){var e=this.draggedStructures.get(t);return e&&e instanceof p&&e.stop(),this.draggedStructures.delete(t),this.draggingPointer.delete(t),void 0!==e},t}()),s=!1,a=function(){function t(){this.nbDragEnter=0,s?console.error("Do not create multiple instance of directive drag-and-drop-wrapper !"):s=!0}return t.prototype.removeFeedbackForDragPointer=function(){this.nbDragEnter=0,i.dropZones.forEach((function(t){t.removePointerHover("dragPointer"),t.removeDropCandidatePointer("dragPointer")}))},t.prototype.drop=function(t){t.preventDefault(),t.stopPropagation(),this.removeFeedbackForDragPointer()},t.prototype.dragover=function(t){t.preventDefault(),t.stopPropagation()},t.prototype.dragenter=function(t){this.nbDragEnter++,1===this.nbDragEnter&&i.startDrag("dragPointer",t)},t.prototype.dragleave=function(t){this.nbDragEnter--,0===this.nbDragEnter&&(this.removeFeedbackForDragPointer(),i.pointerRelease("dragPointer"))},t.prototype.dragend=function(t){i.pointerRelease("dragPointer"),this.removeFeedbackForDragPointer(),t.preventDefault()},t.prototype.mousemove=function(t){i.pointerMove("mouse",t.clientX,t.clientY)},t.prototype.mouseup=function(t){i.pointerRelease("mouse")},t.prototype.touchmove=function(t){for(var e=0;e<t.changedTouches.length;e++){var o=t.changedTouches.item(e);i.pointerMove(o.identifier.toString(),o.clientX,o.clientY)&&(t.preventDefault(),t.stopPropagation())}},t.prototype.touchend=function(t){for(var e=0;e<t.changedTouches.length;e++){var o=t.changedTouches.item(e);i.pointerRelease(o.identifier.toString())&&(t.preventDefault(),t.stopPropagation())}},r([e.HostListener("document: drop",["$event"])],t.prototype,"drop",null),r([e.HostListener("document: dragover",["$event"])],t.prototype,"dragover",null),r([e.HostListener("document: dragenter",["$event"])],t.prototype,"dragenter",null),r([e.HostListener("document: dragleave",["$event"])],t.prototype,"dragleave",null),r([e.HostListener("document: dragend",["$event"])],t.prototype,"dragend",null),r([e.HostListener("document: mousemove",["$event"])],t.prototype,"mousemove",null),r([e.HostListener("document: mouseup",["$event"])],t.prototype,"mouseup",null),r([e.HostListener("document: touchmove",["$event"])],t.prototype,"touchmove",null),r([e.HostListener("document: touchend",["$event"])],t.prototype,"touchend",null),t=r([e.Directive({selector:"*[drag-and-drop-wrapper]"})],t)}(),d=function(t){for(var e=0,o=0;t;)o+=t.offsetTop-t.scrollTop+t.clientTop,e+=t.offsetLeft-t.scrollLeft+t.clientLeft,t=t.offsetParent;return{left:e,top:o}},p=function(){function t(t){this.disabled=!1,this.onDragStart=new e.EventEmitter,this.onDragEnd=new e.EventEmitter,this.isBeingDragged=!1,this.cloneNode=null,this.possibleDropZones=new Map,this.root=t.nativeElement,s||console.error("You should add one dragdrop attribute to your code before using draggable")}return t.prototype.ngOnInit=function(){},t.prototype.ngOnDestroy=function(){},t.prototype.onMouseDown=function(t){this.disabled||(t.preventDefault(),t.stopPropagation(),this.prestart("mouse",t.clientX,t.clientY))},t.prototype.onTouchStart=function(t){t.stopPropagation();for(var e=0;e<t.changedTouches.length;e++){var o=t.changedTouches.item(e);this.prestart(o.identifier.toString(),o.clientX,o.clientY)}},t.prototype.prestart=function(t,e,o){var r=this;i.preStartDrag(t,e,o,this.startDelay||0,this.startDistance||10).then((function(){r.start(t,e,o)}),(function(){}))},t.prototype.start=function(t,e,o){if(!this.isBeingDragged){this.isBeingDragged=!0,this.idPointer=t;var r=d(this.root);this.ox=e,this.oy=o,this.dx=e-r.left,this.dy=o-r.top,this.tx=this.root.offsetWidth,this.ty=this.root.offsetHeight,this.getClone(),this.cloneNode.style.left=e-this.dx+"px",this.cloneNode.style.top=o-this.dy+"px",this.onDragStart.emit(this.draggedData),this.possibleDropZones=i.startDrag(t,this)}},t.prototype.stop=function(){var t=this;this.possibleDropZones.forEach((function(e){e.removePointerHover(t.idPointer),e.removeDropCandidatePointer(t.idPointer)})),this.isBeingDragged=!1,this.possibleDropZones.clear(),this.idPointer=null,this.currentDropZone&&this.currentDropZone.drop(this.draggedData),this.currentDropZone=null,this.onDragEnd.emit(this.draggedData),this.deleteClone()},t.prototype.move=function(t,e){var o=null;if(null===this.cloneNode&&this.getClone(),this.cloneNode){this.cloneNode.style.left=t-this.dx+"px",this.cloneNode.style.top=e-this.dy+"px";var r=this.cloneNode.style.visibility;this.cloneNode.style.visibility="hidden";var i=this.cloneNode.style.top;this.cloneNode.style.top="999999999px",o=n.elementFromPoint(t,e),this.cloneNode.style.top=i,this.cloneNode.style.visibility=r;for(var s=this.currentDropZone;o&&(this.currentDropZone=this.possibleDropZones.get(o),!this.currentDropZone);)o=o.parentElement;s!==this.currentDropZone&&(s&&s.removePointerHover(this.idPointer),this.currentDropZone&&this.currentDropZone.appendPointerHover(this.idPointer))}return this},t.prototype.deepStyle=function(t,e){if(t instanceof HTMLElement){for(var o=window.getComputedStyle(t),r=0;r<o.length;r++){var n=o[r];e.style[n]=o[n]}for(r=0;r<t.children.length;r++)this.deepStyle(t.children.item(r),e.children.item(r))}},t.prototype.deleteClone=function(){this.cloneNode&&(this.cloneNode.parentNode&&this.cloneNode.parentNode.removeChild(this.cloneNode),this.cloneNode=null)},t.prototype.getClone=function(){return null===this.cloneNode&&(this.cloneNode=this.root.cloneNode(!0),this.deepStyle(this.root,this.cloneNode),document.body.appendChild(this.cloneNode),this.cloneNode.style.position="absolute",this.cloneNode.style.zIndex="999",this.cloneNode.style.marginLeft="0",this.cloneNode.style.marginTop="0",this.cloneNode.style.marginRight="0",this.cloneNode.style.marginBottom="0",this.cloneNode.style.opacity="",this.cloneNode.style.cursor="",this.cloneNode.style.transform="",this.cloneNode.style.transformOrigin="",this.cloneNode.style.animation="",this.cloneNode.style.transition="",this.cloneNode.classList.add("drag-and-drop-clone-node")),this.cloneNode},t.ctorParameters=function(){return[{type:e.ElementRef}]},r([e.Input("draggable")],t.prototype,"draggedData",void 0),r([e.Input("drag-start-delay")],t.prototype,"startDelay",void 0),r([e.Input("start-distance")],t.prototype,"startDistance",void 0),r([e.Input("disabled")],t.prototype,"disabled",void 0),r([e.Output("drag-start")],t.prototype,"onDragStart",void 0),r([e.Output("drag-end")],t.prototype,"onDragEnd",void 0),r([e.HostListener("mousedown",["$event"])],t.prototype,"onMouseDown",null),r([e.HostListener("touchstart",["$event"])],t.prototype,"onTouchStart",null),t=r([e.Directive({selector:"*[draggable]"})],t)}(),c=function(){function t(t){this.nbDragEnter=0,this.onDropEmitter=new e.EventEmitter,this.onDragStart=new e.EventEmitter,this.onDragEnd=new e.EventEmitter,this.onDragEnter=new e.EventEmitter,this.onDragLeave=new e.EventEmitter,this.dropCandidateofPointers=[],this.pointersHover=[],s||console.error("You should add one dragdrop attribute to your code before using dropzone"),this.root=t.nativeElement,i.registerDropZone(this)}return t.prototype.ngOnInit=function(){},t.prototype.ngOnDestroy=function(){i.unregisterDropZone(this)},t.prototype.BrowserDragEnter=function(t){this.nbDragEnter++,1===this.nbDragEnter&&this.appendPointerHover("dragPointer")},t.prototype.BrowserDragLeave=function(t){this.nbDragEnter--,0===this.nbDragEnter&&this.removePointerHover("dragPointer")},t.prototype.BrowserDrop=function(t){i.pointerRelease("dragPointer"),this.nbDragEnter=0,this.onDropEmitter.emit(t)},t.prototype.drop=function(t){this.onDropEmitter.emit(t)},t.prototype.checkAccept=function(t){return t instanceof p?!this.acceptFunction||this.acceptFunction(t.draggedData):!this.acceptFunction||this.acceptFunction(t)},t.prototype.hasPointerHover=function(t){return this.pointersHover.indexOf(t)>=0},t.prototype.appendPointerHover=function(t){if(-1===this.pointersHover.indexOf(t)){var e=i.draggedStructures.get(t);this.pointersHover.push(t),e instanceof p?(this.dragOverCSS_pointer&&e.getClone().classList.add(this.dragOverCSS_pointer),this.onDragEnter.emit(e.draggedData)):this.onDragEnter.emit(e),this.dragOverCSS&&this.root.classList.add(this.dragOverCSS)}},t.prototype.removePointerHover=function(t){var e=this.pointersHover.indexOf(t);if(e>=0){var o=i.draggedStructures.get(t);this.pointersHover.splice(e,1),o instanceof p?(this.dragOverCSS_pointer&&o.getClone().classList.remove(this.dragOverCSS_pointer),this.onDragLeave.emit(o.draggedData)):this.onDragLeave.emit(o),0===this.pointersHover.length&&this.dragOverCSS&&this.root.classList.remove(this.dragOverCSS)}},t.prototype.appendDropCandidatePointer=function(t){if(-1===this.dropCandidateofPointers.indexOf(t)){var e=i.draggedStructures.get(t);e instanceof p?this.onDragStart.emit(e.draggedData):this.onDragStart.emit(e),this.dropCandidateofPointers.push(t),this.dragCSS&&this.root.classList.add(this.dragCSS)}},t.prototype.removeDropCandidatePointer=function(t){var e=this.dropCandidateofPointers.indexOf(t);if(e>=0){var o=i.draggedStructures.get(t);o instanceof p?this.onDragEnd.emit(o.draggedData):this.onDragEnd.emit(o),this.dropCandidateofPointers.splice(e,1),0===this.dropCandidateofPointers.length&&this.dragCSS&&this.root.classList.remove(this.dragCSS)}},t.ctorParameters=function(){return[{type:e.ElementRef}]},r([e.Input("drag-css")],t.prototype,"dragCSS",void 0),r([e.Input("drag-over-css")],t.prototype,"dragOverCSS",void 0),r([e.Input("drag-over-css-for-draggable")],t.prototype,"dragOverCSS_pointer",void 0),r([e.Input("accept-function")],t.prototype,"acceptFunction",void 0),r([e.Output("ondrop")],t.prototype,"onDropEmitter",void 0),r([e.Output("drag-start")],t.prototype,"onDragStart",void 0),r([e.Output("drag-end")],t.prototype,"onDragEnd",void 0),r([e.Output("drag-enter")],t.prototype,"onDragEnter",void 0),r([e.Output("drag-leave")],t.prototype,"onDragLeave",void 0),r([e.HostListener("dragenter",["$event"])],t.prototype,"BrowserDragEnter",null),r([e.HostListener("dragleave",["$event"])],t.prototype,"BrowserDragLeave",null),r([e.HostListener("drop",["$event"])],t.prototype,"BrowserDrop",null),t=r([e.Directive({selector:"*[dropzone]"})],t)}(),u=function(){function t(){}var n;return n=t,t.forRoot=function(){return{ngModule:n,providers:[]}},t=n=r([e.NgModule({imports:[o.CommonModule],declarations:[p,c,a],exports:[p,c,a]})],t)}();t.NgxDragAndDropModule=u,t.ɵa=a,t.ɵb=p,t.ɵc=c,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-drag-and-drop.umd.min.js.map