| 1 |
- import{_ as I,r as i,I as k,j as q,o as v,w as $,f as p,x as P,F as R,ah as z,Y as y,K as F,m as h,J as L,U as M,l as O,t as Y}from"./index-C2jxLkOi.js";const j=["data-index","onDragstart","onDragover","onDragenter"],G={__name:"index",props:{modelValue:{type:Array,required:!0}},emits:["update:modelValue","change"],setup(_,{expose:D,emit:E}){const m=_,u=E,f=i([...m.modelValue].map((e,t)=>({...e,id:t+1}))),l=i([...m.modelValue].map((e,t)=>({...e,id:t+1}))),s=i(null),g=i(null),d=i(new Map);k(()=>m.modelValue,e=>{l.value=[...e]});const x=e=>{if(!d.value.has(e.dataset.index))return;const{x:t,y:o}=d.value.get(e.dataset.index),a=e._x-t,r=e._y-o;(a||r)&&(e.style.transform=`translate(${a}px, ${r}px)`,e.style.transition="none")},b=e=>{e.style.transform="",e.style.transition=""},S=(e,t)=>{document.querySelectorAll(".draggable-item").forEach((a,r)=>{const n=a.getBoundingClientRect();d.value.set(r.toString(),{x:n.left,y:n.top}),a._x=n.left,a._y=n.top}),s.value=t,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t),e.target.style.opacity="0.7",e.target.style.boxShadow="0 4px 8px rgba(0, 0, 0, 0.1)"},V=(e,t)=>{e.preventDefault(),g.value=t,e.dataTransfer.dropEffect="move"},T=(e,t)=>{e.preventDefault(),s.value!==null&&s.value!==t&&(B(s.value,t),s.value=t)},w=e=>{e.target.style.opacity="1",e.target.style.boxShadow="none",e.target.style.transform="none",s.value=null,g.value=null,d.value.clear(),u("update:modelValue",[...l.value]),u("change",[...l.value])},B=(e,t)=>{if(e===t)return;const o=l.value[e];l.value.splice(e,1),l.value.splice(t,0,o),y(()=>{document.querySelectorAll(".draggable-item").forEach((r,n)=>{const c=r.getBoundingClientRect();r._x=c.left,r._y=c.top})})},A=()=>{l.value=[...f.value].map((e,t)=>({...e,id:t+1})),u("update:modelValue",[...l.value])};function C(){f.value=[...m.modelValue].map((e,t)=>({...e,id:t+1}))}return D({resetToDefault:A,moveItemToPosition:(e,t)=>{if(e<0||e>=l.value.length)return;const o=l.value[e];l.value.splice(e,1),t==="first"?l.value.unshift(o):t==="last"&&l.value.push(o),l.value.forEach((a,r)=>{a.id=r+1}),y(()=>{document.querySelectorAll(".draggable-item").forEach((r,n)=>{const c=r.getBoundingClientRect();r._x=c.left,r._y=c.top})}),u("update:modelValue",[...l.value]),u("change",[...l.value])},setDefaultItems:C}),(e,t)=>(v(),q(z,{name:"list",tag:"ul",class:"draggable-list",onBeforeEnter:x,onAfterEnter:b},{default:$(()=>[(v(!0),p(R,null,P(l.value,(o,a)=>(v(),p("li",{key:o.prop,class:L(["draggable-item",{dragging:s.value===a,"drag-over":g.value===a&&g.value!==s.value}]),draggable:"true","data-index":a,onDragstart:r=>S(r,a),onDragover:h(r=>V(r,a),["prevent"]),onDragenter:h(r=>T(r,a),["prevent"]),onDragend:w,style:F({transform:s.value===a?"scale(1.02)":"none",transition:s.value===a?"none":"all 0.3s ease"})},[M(e.$slots,"item",{item:o,index:a},()=>[O(Y(o.text||o.name||`Item ${a+1}`),1)],!0)],46,j))),128))]),_:3}))}},N=I(G,[["__scopeId","data-v-ef6618ec"]]);export{N as C};
|
