Key insights
- A grabbed item needs to feel like it left the surface. Confirm the lift with three cues at once: a slight scale-up, a deeper shadow, and a small tilt.
- Drop zones speak first. Reveal where the item will land before release, not after — the drag should never feel like a guess.
- Match the drop-zone cue to its scope: an insertion line to slot between existing items, a filled highlight to land inside a whole column.
- On structured surfaces, snap the item to the nearest valid slot; reserve free positioning for canvases where any coordinate is valid.
- While dragging on a snapping surface, expose the valid target slots (dashed outlines) so the destination is never ambiguous.
- A drag is easy to fumble. Pair every drop with a short undo toast (~5 seconds) so a wrong move costs one click, not a redo.
Do / Don't
- Do: Confirm pickup with scale, shadow, and tilt together so the grab reads instantly
- Do: Highlight the exact drop target during the drag, before the user lets go
- Do: Offer a brief undo after a drop so a misdrop is one click to reverse
- Don't: Snap a released card into place with no lift or shadow — it feels like nothing happened
- Don't: Force pixel-precise placement when snapping to a valid slot would do the work
- Don't: Make a wrong drop permanent with no way to reverse it
