Widget Drag Grid

Build a dashboard tile list that reorders by dragging. Use a reorder primitive (framer-motion's Reorder.Group / Reorder.Item, or an equivalent) over a list of tiles, each showing a label and a value. The critical decision: set dragListener to FALSE on each item and start the drag from a dedicated grip button using drag controls. A whole-card drag steals every tap inside the card, and on a dashboard that is every number you wanted to click. The grip is a small icon button with its own aria-label naming what it moves ("Reorder Revenue"), and touchAction: "none" so the browser does not claim the vertical gesture for page scrolling. The neighbours must move DURING the drag, not on drop. Seeing the gap open is what tells the user where the tile will land; without it they have to drop it to find out. While dragging, lift the tile: scale to about 1.03, a real shadow, and a raised z-index. Without a lift the tile looks like it is sliding under the others rather than over them. Use a stiff, high-damping spring (stiffness ~420, damping ~34). Reordering should feel like snapping into place; a bouncy spring here reads as imprecision. Under prefers-reduced-motion, keep the reorder and the settle but drop the scale-and-shadow lift. Colors as tokens: paper tiles, hairline borders, muted ink for labels and the grip. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.