aria-dropeffect

The global aria-dropeffect attribute indicates what functions may be performed when a dragged object is released on the drop target.

Description

Deprecated in ARIA 1.1, the aria-dropeffect property indicates what functions may be performed when a dragged object is released on the drop target. The global aria-dropeffect attribute provides assistive technology users the same information provided via the DataTransfer.dropEffect to sited users via the dropeffect icon.

Text selections, images, and links can be dragged by default. Setting the global draggable="true" attribute, part of HTML5's Drag and Drop API, with a dragstart event handler, means any DOM node can be made draggable as well.

When a drag event occurs, a translucent image is generated of the dragged element which follows the user's pointer during the drag. The default image can be changed to any image with setDragImage. Along with the default image identifying the element being dragged, there is a dataTransfer.dropEffect property that can be used to control the visual feedback the user is given during a drag-and-drop operation. The aria-dropeffect property should be used to provide assistive technology users the same feedback provided to sited users via dataTransfer.dropEffect property.

dropeffect defines which cursor the browser displays while dragging, and is set on the element on which the element may be dropped. During the drag operation, as the draggable element is dragged over different drop areas, the drag effects—both the dataTransfer.dropeffect and the aria-dropeffect—should be modified to indicate the type of operation that will occur if the dragged element is released.

More than one drop effect may be supported for a given element. Therefore, the value of the aria-dropeffect attribute is a space separated list of functions. Functions include copy, execute, link, and move. The default is none, meaning there is no supported functionality in the application. Setting aria-dropeffect="popup" informs assistive technology users that there is a popup menu or dialog of drag operations from which the user can choose.

Including the attribute provides assistive technologies the ability to convey the possible drag options available to the assistive technology user, but doesn't add any actual functionality.

The aria-dropeffect property is expected to be replaced by a new feature in a future version of WAI-ARIA and is considered deprecated.

Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation, as the drop effect functions available are dependent on the object being dragged. Therefore, you'll generally add aria-dropeffect to all the potential drop targets when the dragstart event is fired.

Values

The value is a space seperated list of possible actions. The followig are the valid tokens:

copy

A duplicate of the source object will be dropped into the target.

execute

A function supported by the drop target is executed, using the drag source as an input.

link

A reference or shortcut to the dragged object will be created in the target object.

move

The source object will be removed from its current location and dropped into the target.

none (default)

No operation can be performed; effectively cancels the drag operation if an attempt is made to drop on this object. Ignored if combined with any other token value. e.g., 'none copy' is equivalent to a 'copy' value.

popup

There is a popup menu or dialog that allows the user to choose one of the drag operations (copy, move, link, execute) and any other drag functionality, such as cancel.

Associated roles

Used in ALL roles.

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA: aria-dropeffect Attribute' in that specification.
Recommendation

See Also