Design Drag and Drop Beyond the Basics
Motion & Interaction · drag and drop
Updated 2026-07-28
- Dragging is invisible until the interface confirms it.
- Communicate three moments:
Before dragging
- Show draggable items.
- Use appropriate cursor states.
- Make the action discoverable.
During dragging
- Lift the item visually.
- Show movement.
- Display valid drop locations.
After dropping
- Confirm success.
- Animate the new position.
- Provide undo when mistakes are possible.
- Never create blind drops:
- Users should know where an item will land.
- Support alternatives:
- Keyboard movement.
- Menus.
- Buttons.
- Drag and drop should feel like moving a real object, not fighting a hidden system.
Related guides
UX Handbook