x-drag/dist/x-drag.umd.ts

<h1 align="center">XDrag</h1> <p align="center">A <strong>highly interactive draggable</strong> component based on <code><a href="https://v3.vuejs.org/">Vue 3</a></code></p>

(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.xDrag={},l.Vue))})(this,function(l,e){"use strict";var L="",R="",$=(c,s)=>{const a=c.__vccOpts||c;for(const[n,t]of s)a[n]=t;return a},j=$(e.defineComponent({props:{modelValue:null,activeClass:null,appendTo:{default:"#app"}},emits:["onDragEnd"],setup(c,{emit:s}){var y,C;const a=c,n=e.getCurrentInstance(),t=e.inject("setNewNode"),o=(y=e.inject("src"))!=null?y:e.ref(null);e.provide("src",o);const m=(C=e.inject("setSrc"))!=null?C:i=>o.value=i;e.provide("setSrc",m),e.provide("dragIns",n),e.provide("props",a),e.provide("emits",s);const I=i=>{var D,h,N,v;const{instance:_,index:d}=i;if(!!((D=o.value)==null?void 0:D.instance))if(((h=o.value)==null?void 0:h.instance.uid)===_.uid){const{modelValue:f}=a;[f[d],f[(N=o.value)==null?void 0:N.index]]=[f[(v=o.value)==null?void 0:v.index],f[d]],o.value.index=d}else{const{modelValue:f}=o.value.instance.props,{modelValue:w}=_.props;w.splice(d,0,...f.splice(o.value.index,1)),e.nextTick(()=>{const r=_.ctx.$el.children[d];t&&t(r),m({instance:_,index:d})})}};return e.provide("handleSort",I),(i,_)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{tag:"ul",name:"x-drag",class:"x-drag-container"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.$slots.default&&i.$slots.default()[0])))]),_:1}))}}),[["__scopeId","data-v-1e3a3735"]]),q="";const T=["onDragstart","onDrag","onDragend","onDragenter"];var k=$(e.defineComponent({props:{itemIndex:null,identityClass:null},setup(c){const s=c,a=e.ref();let n;const t=e.inject("newNode"),o=e.ref([NaN,NaN]),m=e.ref(1),I=e.inject("setSrc"),y=e.inject("dragIns"),C=e.inject("handleSort"),i=e.inject("props"),_=e.inject("emits"),d=e.inject("identityClass"),D=e.inject("setIdentityClass"),h=i.appendTo?document.querySelector(i.appendTo):document.body;e.watch(t,r=>{m.value=r===a.value?0:1});const N=r=>{var X,E;const{offsetX:p,offsetY:g}=r,u=new Image;u.src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E",r.dataTransfer.setDragImage(u,0,0),o.value=[p,g];const{left:x,top:S}=(X=a.value)==null?void 0:X.getBoundingClientRect();n=(E=a.value)==null?void 0:E.cloneNode(!0),n.classList.add("dragging-item"),i.activeClass&&n.classList.add(i.activeClass),n.classList.remove("x-drag-item"),n.style.transform=`translate(${x}px, ${S}px)`,D&&s.identityClass&&D(s.identityClass),m.value=0,I({instance:y,index:s.itemIndex}),h.appendChild(n)},v=r=>{if(n){const{clientX:p,clientY:g}=r;if(p&&g){const[u,x]=o.value;n.style.transform=`translate(${p-u}px, ${g-x}px)`}}},f=r=>{r.preventDefault(),d&&s.identityClass?d.value===s.identityClass&&C({instance:y,index:s.itemIndex}):C({instance:y,index:s.itemIndex})},w=()=>{e.nextTick(()=>{var u,x,S;const{left:r,top:p}=(S=(u=a.value)==null?void 0:u.getBoundingClientRect())!=null?S:(x=t==null?void 0:t.value)==null?void 0:x.getBoundingClientRect(),g=n.animate([{transform:n.style.transform},{transform:`translate(${r}px, ${p}px)`}],{duration:300,easing:"linear"});g.onfinish=()=>{h.removeChild(n),m.value=1,o.value=[NaN,NaN],I(null),t&&(t.value=null),_("onDragEnd",i.modelValue)}})};return(r,p)=>(e.openBlock(),e.createElementBlock("li",{draggable:"true",ref_key:"dragItem",ref:a,class:"x-drag-item",style:e.normalizeStyle({opacity:m.value}),onDragstart:e.withModifiers(N,["stop"]),onDrag:e.withModifiers(v,["stop"]),onDragover:p[0]||(p[0]=g=>g.preventDefault()),onDragend:e.withModifiers(w,["stop"]),onDragenter:e.withModifiers(f,["stop"])},[e.renderSlot(r.$slots,"default",{},void 0,!0)],44,T))}}),[["__scopeId","data-v-62c67f34"]]);const V={class:"x-multi-conrainer"},B=e.defineComponent({setup(c){const s=e.ref(null);e.provide("src",s),e.provide("setSrc",t=>s.value=t);const a=e.ref(null);e.provide("newNode",a),e.provide("setNewNode",t=>a.value=t);const n=e.ref(null);return e.provide("identityClass",n),e.provide("setIdentityClass",t=>n.value=t),(t,o)=>(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"default")]))}}),M=[j,k,B],b=function(c){M.forEach(s=>{c.component(s.name,s)})};l.XDrag=j,l.XDragItem=k,l.XMultiContainer=B,l.install=b,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});