Ensuring that drag-and-drop gestures can be cancelled

Metadata

general

sufficient

When to Use

Applicability

The Technique us applicable 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).

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.

Description

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

Note: This technique addresses gestures 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).

Examples

Resources<

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

Tests

Procedure

  1. Determine if any content items are draggable. If this is the case:
  2. Check if the drag-and-drop action can be reversed by releasing the picked-up item outside a drop target
  3. Check if drag-and-drop action can be reversed by dragging the picked-up item back to its old position.
  4. Check if drag-and-drop action can be reversed after releasing the item over the drop target via a dialog or an undo control.

Expected Results