vue3-drag-drop
Version:
Simple drag and drop using native event API for Vue 3
2 lines (1 loc) • 11 kB
JavaScript
(function(h,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],d):(h=typeof globalThis<"u"?globalThis:h||self,d(h["vue3-drag-drop"]={},h.Vue))})(this,function(h,d){"use strict";const g={data:void 0},c=o=>o.reduce((n,a)=>(n[a]=a)&&n,{}),u=c(["drag","dragend","dragenter","dragleave","dragstart","dragover","drop"]);c(["copy","move","link","none"]);const E=c(["none","copy","copyLink","copyMove","link","linkMove","move","all","uninitialized"]),p=(o,n)=>{const a=o.__vccOpts||o;for(const[r,t]of n)a[r]=t;return a},S={props:{draggable:{type:Boolean,default:!0},transferData:{},effectAllowed:{validator:o=>o in E},image:String,imageXOffset:{type:Number,default:0},imageYOffset:{type:Number,default:0},hideImageHtml:{type:Boolean,default:!0},tag:{type:String,default:"div"}},emits:u,data(){return{dragging:!1}},computed:{events:()=>u,scopedData(){return this.dragging&&this.transferData},hideImageStyle:()=>({position:"fixed",top:"-1000px"})},methods:{emitEvent(o,n){const a=n.dataTransfer;if(o===u.dragstart){if(this.effectAllowed&&(a.effectAllowed=this.effectAllowed),this.image){const r=new Image;r.src=this.image,a.setDragImage&&a.setDragImage(r,this.imageXOffset,this.imageYOffset)}else if(this.$slots.image&&this.$refs.imageSlotWrapper){const r=this.$refs.imageSlotWrapper.firstElementChild;r&&a.setDragImage&&a.setDragImage(r,this.imageXOffset,this.imageYOffset)}this.transferData!==void 0&&(g.data=this.transferData,n.dataTransfer.setData("text","")),this.dragging=!0}this.$emit(o,this.transferData,n),o===u.dragend&&(g.data=void 0,this.dragging=!1)}}};function O(o,n,a,r,t,e){return d.openBlock(),d.createBlock(d.resolveDynamicComponent(a.tag),{draggable:a.draggable,onDrag:n[0]||(n[0]=i=>e.emitEvent(e.events.drag,i)),onDragstart:n[1]||(n[1]=i=>e.emitEvent(e.events.dragstart,i)),onDragenter:n[2]||(n[2]=i=>e.emitEvent(e.events.dragenter,i)),onDragleave:n[3]||(n[3]=i=>e.emitEvent(e.events.dragleave,i)),onDragend:n[4]||(n[4]=i=>e.emitEvent(e.events.dragend,i))},{default:d.withCtx(()=>[d.renderSlot(o.$slots,"default",{transferData:e.scopedData}),a.hideImageHtml?(d.openBlock(),d.createElementBlock("div",{key:0,ref:"imageSlotWrapper",style:d.normalizeStyle(e.hideImageStyle)},[d.renderSlot(o.$slots,"image",{transferData:e.scopedData})],4)):d.renderSlot(o.$slots,"image",{key:1,transferData:e.scopedData})]),_:3},40,["draggable"])}const m=p(S,[["render",O]]),T={data(){return{transferData:void 0,isDraggingOver:!1,insideElements:new Set}},props:{tag:{type:String,default:"div"}},emits:u,computed:{events:()=>u,scopedData(){return this.isDraggingOver&&this.transferData}},methods:{emitEvent(o,n){this.transferData=g.data,this.$emit(o,this.transferData,n),o===u.dragenter&&(this.insideElements.size||n.target===this.$el)&&this.insideElements.add(n.target),o===u.dragleave&&this.insideElements.delete(n.target),o===u.drop&&this.insideElements.clear(),this.isDraggingOver=Boolean(this.insideElements.size)}}};function P(o,n,a,r,t,e){return d.openBlock(),d.createBlock(d.resolveDynamicComponent(a.tag),{onDragenter:n[0]||(n[0]=i=>e.emitEvent(e.events.dragenter,i)),onDragleave:n[1]||(n[1]=i=>e.emitEvent(e.events.dragleave,i)),onDragover:n[2]||(n[2]=d.withModifiers(i=>e.emitEvent(e.events.dragover,i),["prevent"])),onDrop:n[3]||(n[3]=d.withModifiers(i=>e.emitEvent(e.events.drop,i),["prevent"]))},{default:d.withCtx(()=>[d.renderSlot(o.$slots,"default",{transferData:e.scopedData})]),_:3},32)}const D=p(T,[["render",P]]);typeof window<"u"&&Promise.resolve().then(()=>b);const v={install(o){o.component("Drag",m),o.component("Drop",D)}};typeof window<"u"&&window.Vue&&window.Vue.use(v);var y;(function(o){var n=function(){function r(){this._dropEffect="move",this._effectAllowed="all",this._data={}}return Object.defineProperty(r.prototype,"dropEffect",{get:function(){return this._dropEffect},set:function(t){this._dropEffect=t},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"effectAllowed",{get:function(){return this._effectAllowed},set:function(t){this._effectAllowed=t},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"types",{get:function(){return Object.keys(this._data)},enumerable:!0,configurable:!0}),r.prototype.clearData=function(t){t!==null?delete this._data[t.toLowerCase()]:this._data={}},r.prototype.getData=function(t){return this._data[t.toLowerCase()]||""},r.prototype.setData=function(t,e){this._data[t.toLowerCase()]=e},r.prototype.setDragImage=function(t,e,i){var s=a._instance;s._imgCustom=t,s._imgOffset={x:e,y:i}},r}();o.DataTransfer=n;var a=function(){function r(){if(this._lastClick=0,r._instance)throw"DragDropTouch instance already created.";var t=!1;if(document.addEventListener("test",function(){},{get passive(){return t=!0,!0}}),navigator.maxTouchPoints){var e=document,i=this._touchstart.bind(this),s=this._touchmove.bind(this),l=this._touchend.bind(this),f=t?{passive:!1,capture:!1}:!1;e.addEventListener("touchstart",i,f),e.addEventListener("touchmove",s,f),e.addEventListener("touchend",l),e.addEventListener("touchcancel",l)}}return r.getInstance=function(){return r._instance},r.prototype._touchstart=function(t){var e=this;if(this._shouldHandle(t)){this._reset();var i=this._closestDraggable(t.target);i&&!this._dispatchEvent(t,"mousemove",t.target)&&!this._dispatchEvent(t,"mousedown",t.target)&&(this._dragSource=i,this._ptDown=this._getPoint(t),this._lastTouch=t,t.preventDefault(),setTimeout(function(){e._dragSource===i&&e._img===null&&e._dispatchEvent(t,"contextmenu",i)&&e._reset()},r._CTXMENU),r._ISPRESSHOLDMODE&&(this._pressHoldInterval=setTimeout(function(){e._isDragEnabled=!0,e._touchmove(t)},r._PRESSHOLDAWAIT)))}},r.prototype._touchmove=function(t){if(this._shouldCancelPressHoldMove(t)){this._reset();return}if(this._shouldHandleMove(t)||this._shouldHandlePressHoldMove(t)){var e=this._getTarget(t);if(this._dispatchEvent(t,"mousemove",e)){this._lastTouch=t,t.preventDefault();return}if(this._dragSource&&!this._img&&this._shouldStartDragging(t)){if(this._dispatchEvent(this._lastTouch,"dragstart",this._dragSource)){this._dragSource=null;return}this._createImage(t),this._dispatchEvent(t,"dragenter",e)}this._img&&(this._lastTouch=t,t.preventDefault(),this._dispatchEvent(t,"drag",this._dragSource),e!==this._lastTarget&&(this._dispatchEvent(this._lastTouch,"dragleave",this._lastTarget),this._dispatchEvent(t,"dragenter",e),this._lastTarget=e),this._moveImage(t),this._isDropZone=this._dispatchEvent(t,"dragover",e))}},r.prototype._touchend=function(t){if(this._shouldHandle(t)){if(this._dispatchEvent(this._lastTouch,"mouseup",t.target)){t.preventDefault();return}this._img||(this._dragSource=null,this._dispatchEvent(this._lastTouch,"click",t.target),this._lastClick=Date.now()),this._destroyImage(),this._dragSource&&(t.type.indexOf("cancel")<0&&this._isDropZone&&this._dispatchEvent(this._lastTouch,"drop",this._lastTarget),this._dispatchEvent(this._lastTouch,"dragend",this._dragSource),this._reset())}},r.prototype._shouldHandle=function(t){return t&&!t.defaultPrevented&&t.touches&&t.touches.length<2},r.prototype._shouldHandleMove=function(t){return!r._ISPRESSHOLDMODE&&this._shouldHandle(t)},r.prototype._shouldHandlePressHoldMove=function(t){return r._ISPRESSHOLDMODE&&this._isDragEnabled&&t&&t.touches&&t.touches.length},r.prototype._shouldCancelPressHoldMove=function(t){return r._ISPRESSHOLDMODE&&!this._isDragEnabled&&this._getDelta(t)>r._PRESSHOLDMARGIN},r.prototype._shouldStartDragging=function(t){var e=this._getDelta(t);return e>r._THRESHOLD||r._ISPRESSHOLDMODE&&e>=r._PRESSHOLDTHRESHOLD},r.prototype._reset=function(){this._destroyImage(),this._dragSource=null,this._lastTouch=null,this._lastTarget=null,this._ptDown=null,this._isDragEnabled=!1,this._isDropZone=!1,this._dataTransfer=new n,clearInterval(this._pressHoldInterval)},r.prototype._getPoint=function(t,e){return t&&t.touches&&(t=t.touches[0]),{x:e?t.pageX:t.clientX,y:e?t.pageY:t.clientY}},r.prototype._getDelta=function(t){if(r._ISPRESSHOLDMODE&&!this._ptDown)return 0;var e=this._getPoint(t);return Math.abs(e.x-this._ptDown.x)+Math.abs(e.y-this._ptDown.y)},r.prototype._getTarget=function(t){for(var e=this._getPoint(t),i=document.elementFromPoint(e.x,e.y);i&&getComputedStyle(i).pointerEvents=="none";)i=i.parentElement;return i},r.prototype._createImage=function(t){this._img&&this._destroyImage();var e=this._imgCustom||this._dragSource;if(this._img=e.cloneNode(!0),this._copyStyle(e,this._img),this._img.style.top=this._img.style.left="-9999px",!this._imgCustom){var i=e.getBoundingClientRect(),s=this._getPoint(t);this._imgOffset={x:s.x-i.left,y:s.y-i.top},this._img.style.opacity=r._OPACITY.toString()}this._moveImage(t),document.body.appendChild(this._img)},r.prototype._destroyImage=function(){this._img&&this._img.parentElement&&this._img.parentElement.removeChild(this._img),this._img=null,this._imgCustom=null},r.prototype._moveImage=function(t){var e=this;requestAnimationFrame(function(){if(e._img){var i=e._getPoint(t,!0),s=e._img.style;s.position="absolute",s.pointerEvents="none",s.zIndex="999999",s.left=Math.round(i.x-e._imgOffset.x)+"px",s.top=Math.round(i.y-e._imgOffset.y)+"px"}})},r.prototype._copyProps=function(t,e,i){for(var s=0;s<i.length;s++){var l=i[s];t[l]=e[l]}},r.prototype._copyStyle=function(t,e){if(r._rmvAtts.forEach(function(w){e.removeAttribute(w)}),t instanceof HTMLCanvasElement){var i=t,s=e;s.width=i.width,s.height=i.height,s.getContext("2d").drawImage(i,0,0)}for(var l=getComputedStyle(t),f=0;f<l.length;f++){var _=l[f];_.indexOf("transition")<0&&(e.style[_]=l[_])}e.style.pointerEvents="none";for(var f=0;f<t.children.length;f++)this._copyStyle(t.children[f],e.children[f])},r.prototype._setOffsetAndLayerProps=function(t,e){var i=void 0;t.offsetX===void 0&&(i=e.getBoundingClientRect(),t.offsetX=t.clientX-i.x,t.offsetY=t.clientY-i.y),t.layerX===void 0&&(i=i||e.getBoundingClientRect(),t.layerX=t.pageX-i.left,t.layerY=t.pageY-i.top)},r.prototype._dispatchEvent=function(t,e,i){if(t&&i){var s=document.createEvent("Event"),l=t.touches?t.touches[0]:t;return s.initEvent(e,!0,!0),s.button=0,s.which=s.buttons=1,this._copyProps(s,t,r._kbdProps),this._copyProps(s,l,r._ptProps),this._setOffsetAndLayerProps(s,i),s.dataTransfer=this._dataTransfer,i.dispatchEvent(s),s.defaultPrevented}return!1},r.prototype._closestDraggable=function(t){for(;t;t=t.parentElement)if(t.hasAttribute("draggable")&&t.draggable)return t;return null},r}();a._instance=new a,a._THRESHOLD=5,a._OPACITY=.5,a._DBLCLICK=500,a._CTXMENU=900,a._ISPRESSHOLDMODE=!1,a._PRESSHOLDAWAIT=400,a._PRESSHOLDMARGIN=25,a._PRESSHOLDTHRESHOLD=0,a._rmvAtts="id,class,style,draggable".split(","),a._kbdProps="altKey,ctrlKey,metaKey,shiftKey".split(","),a._ptProps="pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY".split(","),o.DragDropTouch=a})(y||(y={}));const b=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));h.Drag=m,h.Drop=D,h.default=v,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});