Description
The Drag pattern
- Lets users pick up and move items easily within an interface.
- Provides a smooth and intuitive experience for repositioning elements.
- Allows users to rearrange content and organize layouts efficiently.
- Offers real-time visual feedback to show item movement.
- Supports multiple input methods, including mouse, touch, and keyboard.
Anatomy
Anatomy
User flow
Reordering items
Draggable area
Hover
Click and hold to drag
After drag and drop
Examples
List view
Column view
Best practices
- Indicate draggable items
- Use visual cues like a drag handle or cursor change to show items can be dragged.
- Apply subtle shadows to make draggable elements stand out.
- Provide smooth drag interaction
- Allow users to start dragging with a simple click and hold or tap and hold.
- Ensure items move fluidly, without lag or jitter.
- Show real-time feedback
- Highlight the drop target as users drag an item.
- Use animations to indicate movement and placement.
- Maintain context
- Keep the dragged item visible and recognizable during the action.
- Show a ghosted preview of the item’s original position to guide users.
- Support different input methods
- Ensure dragging works with mouse, touch, and keyboard for accessibility.
- Use arrow keys and Enter for users who can’t use a mouse.
- Prevent accidental drags
- Require a short hold delay before initiating a drag to avoid accidental movements.
- Allow users to undo actions easily.
- Give clear confirmation
- Show visual or audio feedback when an item is successfully placed.
- Provide notifications if placement is restricted.