interaction design
Drag and drop
What is drag and drop in UX?
Drag and drop lets people move, reorder or connect things by picking them up and placing them directly, rather than through menus or forms. It's a form of direct manipulation - the on-screen object behaves like a physical one - which feels intuitive and satisfying, but only works well when the design makes clear what can be dragged, where it can go, and what will happen on drop.
Also known as: drag and drop, drag-and-drop, direct manipulation
Prefer to watch?
Watch the recap 1:09
The demo
Reorder this little to-do list. Grab a row by its handle and drop it where you want - or use the up/down buttons. Notice the cues that tell you what's grabbable and where it'll land.
What this demo shows (text version)
A short to-do list can be reordered. Each row shows a grip handle that signals it can be dragged; picking a row up lifts it with a shadow, and the positions it can drop into are highlighted, with a placeholder previewing where it will land. Dropping reorders the list. Alongside the drag, each row also has up and down buttons - a non-drag path that works with keyboard and touch.
That's drag and drop done well: direct manipulation made discoverable with signifiers, drop zones and live feedback, and made inclusive with an equivalent non-drag alternative. Drag and drop is a delightful shortcut when these cues are present and a baseline exists - and a trap when it's undiscoverable or the only way to do something.
Drag and drop turns an abstract operation into a physical one - grab this, put it there - which is intuitive and satisfying when done right. The pitfalls are discoverability and accessibility: people can't tell what's draggable without clear signifiers (a grip handle, a "lift" shadow), can't tell where things can go without visible drop zones, and can't do it at all if it's the only way (no keyboard, touch or pointer-limited path). So signal draggability, show valid targets and a clear drop preview, give feedback throughout the drag, and always provide a non-drag alternative (buttons, a menu) so the feature is usable by everyone. Great when it's a shortcut; a trap when it's the only door.
Picking the item up and dropping it where you wanted felt immediate and natural - that's direct manipulation, and it's why drag and drop is so satisfying. But notice what made it work: a visible handle said "grab here", the drop zones lit up, and the item previewed where it'd land. Without those cues it's a guessing game - and without a non-drag fallback, it locks some people out entirely.
Drag and drop is direct manipulation: people act on objects as if they were physical, which lowers the gulf of execution and feels engaging. Its weaknesses are discoverability (nothing tells you an element is draggable unless you signal it), precision and effort (dragging is fiddly, especially on touch or for motor impairments), and the risk of accidental drops. Each needs deliberate design to overcome.
The cues that make it usable: clear signifiers of draggability (grip dots, a cursor change, a slight lift/shadow on pick-up), visible and highlighted drop zones, a live preview or placeholder showing where the item will land, continuous feedback during the drag, and an easy undo for mis-drops. Snap points and auto-scroll help with precision. Without these, users drag blindly and abandon.
Accessibility is non-negotiable: native drag and drop is invisible to keyboards and screen readers and hard on touch, so it must never be the only way to do something. Provide an equivalent path - move up/down buttons, a "move to" menu, cut-and-paste semantics, or accessible drag patterns with keyboard support and announcements. Treat drag and drop as a delightful shortcut layered on top of an accessible baseline, not as the sole mechanism.