C1.08.1Drag-and-drop phasesdesignresearch

Drag and drop has three phases: pickup, transport, and drop

Aliases: drag and drop · pickup transport drop · drag interaction

What it is

Drag and drop breaks into pickup, transport, and drop. People first identify the object to move and put it into a dragged state, then keep control while carrying it toward a destination, and finally release it at an acceptable location to commit the change. Each phase fails in its own way, and treating drag and drop as "one long click" during design and testing hides where the real problems occur.

Why it happens

Drag and drop is a textbook implementation of the direct manipulation interaction paradigm: pickup forms a temporary binding between object and pointer so the object's visual representation follows the pointer, creating the illusion of holding something in hand; transport continuously updates the object's position and gives real-time can-it-be-dropped-here feedback based on the current location; drop performs hit testing at the release location and actually changes the underlying data state. Throughout, people must sustain three things at once — keeping the press held, controlling trajectory precisely enough, especially for fine targets or narrow containers, and repeatedly shifting visual attention between the moving object and the destination it's searching for. Longer travel distance, smaller targets, and scrolling or occlusion along the way amplify these three burdens against each other rather than simply adding up, because trajectory control and destination search are already competing for the same pool of attention.

Studying it

Record pickup failure (missing the intended selection or grabbing the wrong thing), path deviation and interruption during transport (letting go mid-way because of occlusion or scrolling), invalid drops, overall completion time, and voluntary cancellation as four separate measures rather than folding them into one success rate. Manipulate object size, start-to-end distance, target size, whether scrolling is required, and input device — mouse, stylus, finger — because overall success alone cannot say whether the problem sits in selection, transport, or commitment: a 60% success rate could mean heavy misselection at pickup, or repeated drift during fine-grained placement, and the two call for entirely different fixes.

Where it stops holding

Touch, mouse, pen, and keyboard differ in how a drag is started, sustained, and released — touch relies on an initiation threshold and continuous contact, a mouse relies on button state, and keyboard usually needs a purpose-built substitute interaction rather than a genuinely continuous drag. Reordering a list, moving a file between folders, and transforming a shape on a canvas can all look like "dragging something around" on the surface, yet their committed consequences differ completely — one changes order, another changes ownership, the third changes geometry — so they cannot share one feedback or validation standard. Usability findings gathered on a desktop mouse do not transfer directly to small screens or assistive-input scenarios, where a finger itself occludes the destination and the available travel space is far more constrained.

Applying it

  • Give each of the three phases its own clear, distinguishable feedback: which object was picked up, that an active drag is under way, and whether the current hover location is a valid destination.
  • Instrument events for each phase separately in testing and in production telemetry, to localise exactly where a failure occurred rather than looking only at the single end-state question of whether the object ended up where it should.
  • Provide an additional completion route that does not depend on sustained dragging for long-distance moves, paths crossing occluded areas, or fine, small-target destinations.

Related

  • Same group: C1.08.2 Drag-start thresholds prevent a click from becoming a drag · C1.08.3 Valid drop targets must be explicit during drag · C1.08.4 Auto-scroll when dragging to an edge · C1.08.5 Drag and drop can be cancelled and returned to origin · C1.08.6 Drag and drop needs a non-drag equivalent
  • Nearby: C1.05 Cursor hotspots and hit testing · C1.07 Single and double click
  • Search terms: drag and drop · pickup transport drop · direct manipulation

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/C1.08.1