# Drag Drop

> Drag and drop interaction patterns, sortable lists, kanban boards, and accessible drag and drop.

- Skill: `dragoon0x/drag-drop` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/drag-drop`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/drag-drop/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/drag-drop

---


# 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

## 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