dragoon0x 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
- Drag handle: Use a grip icon (⠿ or ≡), don't make the entire item draggable (interferes with text selection)
- Cursor change:
grabon hover,grabbingwhile dragging - Drop preview: Show where the item will land (insertion line or placeholder)
- Ghost/shadow: Semi-transparent copy of the item follows the cursor
- Auto-scroll: Scroll the container when dragging near edges
- Snap: Items snap to valid drop positions
Feedback
- Source item shows reduced opacity or placeholder
- Valid drop zones highlight
- Invalid drop zones show a "not allowed" indicator
- Animation when item settles into position
- Undo option after drop (toast with "Undo" action)
Accessibility
Drag and drop MUST have a keyboard alternative:
- Select item (Space/Enter)
- Move with arrow keys
- Drop with Space/Enter
- Cancel with Escape
- Screen reader announcements at each step
Mobile
- Long press to initiate drag (not immediate)
- Haptic feedback when item lifts and drops
- Larger touch targets for drag handles
- Consider "move to" action as an alternative to dragging