aria-dropeffect attribute indicates what functions may be performed when a dragged object is released on the drop target.
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
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
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.
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.
The value is a space separated list of possible actions. The following are the valid tokens:
A duplicate of the source object will be dropped into the target.
A function supported by the drop target is executed, using the drag source as an input.
A reference or shortcut to the dragged object will be created in the target object.
The source object will be removed from its current location and dropped into the target.
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.
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.
Used in ALL roles.
|Accessible Rich Internet Applications (WAI-ARIA) |