Skip to content

Technique G210:Ensuring that drag-and-drop actions can be cancelled

About this Technique

This technique relates to 2.5.2: Pointer Cancellation (Sufficient).

This technique applies to any technology that supports pointer input (e.g. supporting any or all of the following: mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input).

Description

The objective of this technique is to ensure that users who use a path-based drag-and-drop action to move an item from the initial location to a drop target can abort the action after picking up the target. This can be done either by releasing the item outside a drop area, or by moving the item back to its original position in a separate action that undoes the first action. A third option is to have a step after the element is dropped onto target, either with a dialog asking for confirmation of the action when the item is dropped, or providing an undo command.

Note

This technique addresses pointer actions where support has been implemented by authors, not gestures provided by the user agent (such as horizontal swiping to move through the browser history or vertical swiping to scroll through page content) or the operating system (e.g., gestures to move between open apps, or call up contextual menus of assistive technologies when these are enabled).

User Agent and Assistive Technology Support Notes

On touch screen devices, author-supplied path-based and multipoint gestures usually do not work when OS level assistive technologies (AT) like a built-in screenreader is turned on. AT generally consumes path-based or multipoint gestures so they would not reach the authored content. For example, a horizontal drag gesture may not move a slider thumb as intended by the author, but move the screen reader focus to the next or previous element. Some gestures may work if the user operates "pass through gestures" which are often unreliable as they may depend on factors of hardware, operating system, operating system "skin", operating system setting, or user agent.

Examples

  • A site shows a file directory. Files can be picked up and moved over a trash can icon. When the picked-up file is released outside this target, it reverts to the old position.
  • A site shows a file directory. Files can be picked up and moved over a trash can icon to delete it. When the picked-up file is released over the trash can, a modal dialog asks the user to confirm or cancel the delete action.
  • A kanban implementation of a project planning site shows different columns for phases of an activity. Users can pick up and move icons representing planning items to another column. When an item has been picked up and now follows the pointer, it can be moved outside the drop targets (columns) and dropped there to cancel the action. The item will then jump back to the old position.
  • A kanban implementation of an issue tracking system shows columns that indicate different phases in handling issues (such as new / processed / done / closed). There is no screen space outside the kanban columns. Users can pick up and move icons representing issues between columns. When an item has been dropped in another column, the action can be reversed by dragging the icon back to the original column where it will return to its original position (defined by sorting preferences).

Related Resources

No endorsement implied.

Video of canceled drag-and-drop interaction (item released outside drop target) (Youtube)

Tests

Procedure

For content that is draggable, check whether the drag-and-drop action can be reversed by:

  1. releasing the picked-up item outside a drop target
  2. dragging the picked-up item back to its old position
  3. a confirmation dialog or an undo control appears after the item has been dropped

Expected Results

  • At least one option of #1, #2, #3 is true
Back to Top