generic behavior · Structural containers and states
Drag and Drop
A direct-manipulation interaction where users pick up an element and move it to a new position or target zone, with visual feedback for draggable, drag-over, and drop states.
Decisive boundary
Drag and drop is a direct interaction model, not a presentation pattern. Ensure a keyboard and screen-reader accessible alternative exists for every drag operation.
Definition and intent
What is a Drag and Drop UI pattern?
Use the behavior, not the silhouette
A direct-manipulation interaction where users pick up an element and move it to a new position or target zone, with visual feedback for draggable, drag-over, and drop states. The term is used here as a generic behavior label that still needs a more specific semantic structure around it. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Let users rearrange, reassign, or upload content through direct spatial manipulation. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Drag and Drop, the boundary is: Drag and drop is a direct interaction model, not a presentation pattern. Ensure a keyboard and screen-reader accessible alternative exists for every drag operation.
Do not implement it as Reorder buttons when the drag interaction is the primary use case, and Carousel for persistent content rearrangement. If those requirements describe the real task better, use the related pattern page or the full Structural containers and states comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Let users rearrange, reassign, or upload content through direct spatial manipulation.
Define opening and closing
A press-and-hold or dedicated drag handle initiates the drag; the element follows the pointer or finger. Drop on a valid target zone, cancel via Escape, or drag outside the boundary.
Specify access behavior
Focus follows the dragged content programmatically; drop targets must be keyboard accessible as an alternative. Cut, move, and paste keyboard shortcuts provide a non-pointer equivalent; arrow keys may move items when in reorder mode.
Reject the near miss
Reorder buttons when the drag interaction is the primary use case, and Carousel for persistent content rearrangement.
Behavior contract
What must survive the build
- trigger
- A press-and-hold or dedicated drag handle initiates the drag; the element follows the pointer or finger.
- dismissal
- Drop on a valid target zone, cancel via Escape, or drag outside the boundary.
- modality
- Non-modal direct manipulation.
- focus
- Focus follows the dragged content programmatically; drop targets must be keyboard accessible as an alternative.
- keyboard
- Cut, move, and paste keyboard shortcuts provide a non-pointer equivalent; arrow keys may move items when in reorder mode.
- interactive
- The dragged element and drop targets are interactive; the drag source remains available.
- persistence
- The new position or association persists after the drop.
- placement
- In-page direct manipulation; drop zones may be inline, between items, or in a dedicated area.
- mobile
- Long press typically initiates drag; provide visible drag handles and sufficient touch targets.
Failure modes
Common wrong builds
- Making drag the only way to accomplish the task.
- Omitting visual feedback for valid and invalid drop zones.
- Ignoring touch-initiated drag on mobile.
- Failing to announce drag start, current position, and drop completion to assistive technology.
Observable checks
Verify the result
- A keyboard alternative exists for every drag operation.
- Visual feedback shows when an item is being dragged.
- Drop targets highlight on valid drag-over.
- Esc cancels the drag without side effects.
- Touch screens support long-press initiation with clear drag handles.
Coding-agent handoff
Implementation brief template
Pattern: Drag and Drop Purpose: Let users rearrange, reassign, or upload content through direct spatial manipulation. Trigger: A press-and-hold or dedicated drag handle initiates the drag; the element follows the pointer or finger. Dismissal behavior: Drop on a valid target zone, cancel via Escape, or drag outside the boundary. Modality: Non-modal direct manipulation. Focus behavior: Focus follows the dragged content programmatically; drop targets must be keyboard accessible as an alternative. Keyboard behavior: Cut, move, and paste keyboard shortcuts provide a non-pointer equivalent; arrow keys may move items when in reorder mode. Interactive content: The dragged element and drop targets are interactive; the drag source remains available. Placement: In-page direct manipulation; drop zones may be inline, between items, or in a dedicated area. Mobile behavior: Long press typically initiates drag; provide visible drag handles and sufficient touch targets. Do not implement as: Reorder buttons when the drag interaction is the primary use case, and Carousel for persistent content rearrangement. Acceptance checks: - A keyboard alternative exists for every drag operation. - Visual feedback shows when an item is being dragged. - Drop targets highlight on valid drag-over. - Esc cancels the drag without side effects. - Touch screens support long-press initiation with clear drag handles.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Drag and Drop UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Drag and Drop in web UI?
A direct-manipulation interaction where users pick up an element and move it to a new position or target zone, with visual feedback for draggable, drag-over, and drop states. In this reference set it is a generic behavior label that still needs a more specific semantic structure around it.
When should I use a Drag and Drop?
Let users rearrange, reassign, or upload content through direct spatial manipulation. The decisive boundary to confirm is this: Drag and drop is a direct interaction model, not a presentation pattern. Ensure a keyboard and screen-reader accessible alternative exists for every drag operation.
What keyboard and focus behavior does a Drag and Drop need?
Cut, move, and paste keyboard shortcuts provide a non-pointer equivalent; arrow keys may move items when in reorder mode. Focus follows the dragged content programmatically; drop targets must be keyboard accessible as an alternative. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Drag and Drop behave on mobile?
Long press typically initiates drag; provide visible drag handles and sufficient touch targets. Its modality is a separate requirement: Non-modal direct manipulation.
How do I verify a Drag and Drop implementation?
Start with observable checks: A keyboard alternative exists for every drag operation. Visual feedback shows when an item is being dragged. Drop targets highlight on valid drag-over. Then verify the remaining checks and compare the result with the linked source guidance.