Drag and Drop

Drag and drop enables direct spatial manipulation of UI elements for reordering, organizing, or transferring content between containers.

stellae.design

Design Principles

Drag and drop allows users to directly manipulate elements by clicking/touching, holding, and moving them to new positions. Uses: reordering lists, organizing into categories (kanban boards), file uploads, layout builders. It's the most 'direct manipulation' interaction pattern. Key requirements: clear drag affordance (handle), visual feedback during drag (shadow, placeholder), clear drop targets, and always a keyboard alternative.

Why It Matters

Drag and drop is a direct manipulation interaction pattern that allows users to move, reorder, or transfer objects by selecting them and physically repositioning them on screen — making abstract operations like sorting, prioritizing, and organizing feel tangible and intuitive. The pattern leverages the human brain's spatial reasoning abilities, allowing users to understand relationships and hierarchies through physical arrangement rather than abstract menu commands. However, drag and drop is one of the hardest interactions to implement accessibly and reliably across input devices, and a poorly executed implementation can make an interface completely unusable for keyboard, touch, and assistive technology users.

Real-World Examples

Trello's card reordering

Trello allows users to drag cards between columns and within columns to represent workflow transitions and priority changes, making project management feel like moving physical sticky notes on a whiteboard. The interface provides clear visual feedback — a shadow placeholder where the card will land, column highlighting when a card hovers over a valid target, and smooth animation on drop. Trello also provides keyboard shortcuts and a move-card menu as accessible alternatives for users who cannot perform drag interactions.

macOS Finder file organization

The Finder allows users to drag files between folders, to the dock, and to application icons to perform move, copy, and open operations using the same fundamental drag gesture with modifier keys to distinguish between actions. Visual cues include a translucent preview of the dragged item, a spring-loaded folder animation when hovering over a destination, and a green plus badge when the operation will copy rather than move. The pattern feels natural because it maps directly to the physical metaphor of picking up and placing objects.

Counter-example

Form builder with drag-only field reordering

A survey builder tool requires users to drag and drop to reorder form fields, with no alternative keyboard mechanism, no move-up/move-down buttons, and no reorder menu. Users with motor impairments cannot rearrange their surveys at all, keyboard-only users are locked out of the feature entirely, and touch-screen users struggle because the drag gesture conflicts with page scrolling. The tool chose an interaction pattern that works for mouse users and excluded every other input method.

Role-Specific Guidance

Common Mistakes

• The most critical mistake is implementing drag and drop as the only way to perform an operation, making the feature completely inaccessible to keyboard, screen reader, and motor-impaired users who cannot perform pointer-based drag gestures. Teams also frequently neglect the touch experience — failing to implement a long-press delay to distinguish drag from scroll, not handling edge-scrolling when dragging to off-screen targets, and not providing haptic feedback that confirms the drag has initiated. Another common error is not providing undo functionality for drag operations, which means an accidental drop — especially easy on mobile — can reorder items in ways the user did not intend with no recovery path.