Back to docs
UX Pattern

Drag & Drop Design

A recipe for building intuitive drag-and-drop interfaces that feel native, responsive, and delightful — from sortable lists to multi-panel layouts.

Core Principles

  • Immediate feedback. The dragged item lifts, casts a shadow, and follows the cursor within 16ms of pointer down.
  • Predictable drop zones. Highlight valid targets with a glowing border or background shift before the user releases.
  • Undo affordance. Every drop is reversible. Show a subtle toast or inline “Undo” link for 5 seconds.

Visual States

Idle

Flat card, subtle border, no elevation.

Dragging

Elevated, semi-transparent, pointer-events-none.

Drop target

Dashed border, pink glow, placeholder gap opens.

Implementation Checklist

  1. Use pointer events, not mouse events — touch support is free.
  2. Set touch-action: none on the draggable container.
  3. Clone the dragged element into a portal so it renders above everything.
  4. Compute drop index via collision detection, not insertion-point heuristics.
  5. Animate layout shifts with FLIP or a shared layout primitive.
  6. Fire a single state update on drop — never during drag.

Accessibility

Drag-and-drop is inherently mouse-centric. Always provide a keyboard-accessible reorder mechanism — arrow keys with move-up/move-down buttons, or a dedicated reorder dialog. Announce position changes via aria-live regions.

Next: read about Toast notifications for the undo pattern described above.