simple-vue-drag-directive/lib/index.js

a simple diective for vue3 to help developer deal with drag event easier

var t={d:(e,r)=>{for(var s in r)t.o(r,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:r[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};let r,s,i;function o(t){let e=t.currentTarget;r=e,s=r.parentElement,i=s.getBoundingClientRect();let o=Number(r.getAttribute("limit")),n=parseInt(getComputedStyle(r).border),g=t.offsetX+n,l=t.offsetY+n;e.setAttribute("_x",g.toString()),e.setAttribute("_y",l.toString()),l<r.offsetHeight*o&&(function(t,e=[]){t.classList.add(...e)}(e,JSON.parse(e.getAttribute("draggingClassList"))),window.addEventListener("mousemove",a))}function n(t){var e;e=t.target,JSON.parse(e.getAttribute("draggingClassList")).forEach((t=>{e.classList.remove(t)})),window.removeEventListener("mousemove",a)}function a(t){let e=Number(r.getAttribute("_x")),o=Number(r.getAttribute("_y")),n=parseInt(getComputedStyle(s).border);parseInt(getComputedStyle(r).border),r.style.top=t.clientY-o-i.y-n+"px",r.style.left=t.clientX-e-i.x-n+"px","parent"===r.getAttribute("draggingArea")&&(r.offsetTop<0&&(r.style.top="0px"),r.offsetLeft<0&&(r.style.left="0px"),r.offsetTop+r.offsetHeight>i.height-2*n&&(r.style.top=i.height-2*n-r.offsetHeight+"px"),r.offsetLeft+r.offsetWidth>i.width-2*n&&(r.style.left=i.width-2*n-r.offsetWidth+"px"))}t.d(e,{w:()=>g,K:()=>l});const g={created(t,e){let r=e.value?e.value:{},s=r.limit&&r.limit>=0?r.limit:1,i=r.draggingClassList?r.draggingClassList:[],o="parent"===r.dragArea?r.dragArea:"";t.setAttribute("limit",s.toString()),t.setAttribute("draggingClassList",JSON.stringify(i)),t.setAttribute("draggingArea",o),t.style.position="absolute"},mounted(t){t.addEventListener("mousedown",o),t.addEventListener("mouseup",n)},unmounted(t){t.removeEventListener("mousedown",o),t.removeEventListener("mouseup",n)}},l={created(t){t.style.position="absolute",t.style.resize="both",t.style.overflow="hidden"}};var d=e.w,u=e.K;export{d as vDrag,u as vScale};