https://www.castingbell.com/assets/ExampleImage-DjFxaQFO.js

1import{r as x,j as e,P as m}from"./index-DOEDGpFv.js";import{u as v,a as u,D as S,c as j,S as I,r as b,b as C,d as y,T as D,P as N,e as w,C as T}from"./sortable.esm-CZTjz6Wk.js";const E=a=>{alert(`View clicked for ${a}`)};function h({id:a}){const{attributes:i,listeners:t,setNodeRef:n,transform:o,transition:c,isDragging:l}=w({id:a}),d={transform:T.Transform.toString(o),transition:c,touchAction:"none"};return e.jsxs("div",{ref:n,style:d,...i,...t,className:`image-card ${l?"dragging":""}`,children:[e.jsxs("div",{className:"image-content",children:[e.jsx("span",{className:"left-icon",children:"📌"}),e.jsx("span",{className:"image-label",children:a})]}),e.jsx("div",{className:"hover-overlay",children:e.jsx("button",{onClick:()=>E(a),className:"view-btn",children:"👁️ View"})})]})}h.propTypes={id:m.oneOfType([m.string,m.number]).isRequired};function P(){const[a,i]=x.useState(["Image 1","Image 2","Image 3","Image 4","Image 5","Image 6","Image 7","Image 8"]),[t,n]=x.useState(null),o=v(u(N,{activationConstraint:{distance:8}}),u(D,{activationConstraint:{delay:100,tolerance:5}})),c=s=>{n(s.active.id)},l=s=>{const{active:g,over:r}=s;if(g.id!==(r==null?void 0:r.id)){const p=a.indexOf(g.id),f=a.indexOf(r.id);i(y(a,p,f))}n(null)},d=()=>{n(null)};return e.jsx("div",{style:{maxHeight:"80vh",overflowY:"auto",padding:"20px",margin:"20px auto",maxWidth:"960px",border:"1px solid #ddd",borderRadius:"8px",backgroundColor:"#fafafa"},children:e.jsxs(S,{sensors:o,collisionDetection:j,onDragStart:c,onDragEnd:l,onDragCancel:d,children:[e.jsx(I,{items:a,strategy:b,children:e.jsx("div",{className:"image-grid",children:a.map(s=>e.jsx(h,{id:s},s))})}),e.jsx(C,{children:t?e.jsxs("div",{className:"drag-preview",children:["📷 ",t]}):null})]})})}export{P as default};