Drag & Drop Patterns

When to Use

• Reordering items in a list (priority, sequence)
• Kanban-style board movement (status changes)
• File upload zones
• Widget/layout customization

Interaction Design

1. Drag handle: Use a grip icon (⠿ or ≡), don't make the entire item draggable (interferes with text selection)
2. Cursor change: grab on hover, grabbing while dragging
3. Drop preview: Show where the item will land (insertion line or placeholder)
4. Ghost/shadow: Semi-transparent copy of the item follows the cursor
5. Auto-scroll: Scroll the container when dragging near edges
6. Snap: Items snap to valid drop positions