A gesture-based input where users press, hold, and move an element across a surface to reorder, resize, or reposition it. Drag interactions require clear affordances signaling that an element is movable, visual feedback during the drag itself, and a satisfying drop confirmation — absent any of these, users are often unsure whether the action succeeded.
Common contexts
- Reordering items in a task list by pressing and dragging to a new position
- Resizing a column in a data table by dragging the column edge handle
- Building a kanban board where cards must be draggable between status columns
Use when
When users need to spatially reorder or reposition items and the relationship between source and destination is visually obvious. Drag is most appropriate on desktop or tablet where precise motor control is available.
Avoid when
Avoid using drag as the only interaction path on mobile — small touch targets and scroll interference make drag unreliable on phones, and users who rely on keyboards or assistive technology will be entirely excluded.
A drag interaction that works flawlessly on a trackpad often fails completely on a touchscreen — test drag affordances on the lowest-fidelity device your users actually carry, not the device on your desk.
Real-world examples
- Trello's entire task management workflow is built around drag interaction, allowing users to move cards between columns to update project status intuitively.
- Apple's iOS home screen uses drag interactions to let users rearrange app icons and create folders, a pattern that has become a standard mobile interaction paradigm.
- Figma and Sketch rely heavily on drag interactions for core design tasks including moving layers, resizing elements, and reordering items in the layers panel.