What is Drag & Drop?

Drag & Drop is a direct manipulation pattern where users click, hold, and drag an item to a new location. Common for reordering lists, organizing files, building workflows, or moving items between containers. Feels intuitive and powerful when done well, frustrating when done poorly.

When Should You Use This?

Use drag & drop for reordering lists (tasks, priorities), organizing visual layouts (kanban boards, design tools), file uploads, or building workflows (automation tools). Great when order or position matters and users need fine-grained control. Always provide keyboard alternatives for accessibility. Use libraries like dnd-kit, react-beautiful-dnd, or SortableJS—don't build from scratch.

Common Mistakes to Avoid

• •No keyboard support—inaccessible for keyboard users; add arrow keys + Enter to move items
• •Poor visual feedback—show where item will land with placeholder or highlight
• •No touch support—mobile users can't drag with mouse; use touch events or long-press
• •Too sensitive—accidental drags are annoying; require movement threshold before dragging starts
• •No confirmation—for destructive actions (delete by dragging to trash), confirm before deleting

Real-World Examples

• •Trello/Linear—drag cards between columns in kanban boards
• •Notion—drag blocks to reorder pages, build custom layouts
• •Figma—drag layers in hierarchy, move elements on canvas
• •Gmail—drag emails to folders, drag attachments to upload