HTML5 API reference - HTML5 in Action - page 450

Attribute/method Description

items Returns a list of dataTransfer items with the drag data (see table B.12 ) .

setDragImage(element, x, y) Updates the drag feedback image with the given element and coordinates.

addElement(element) Adds an element to the list of elements used to render drag feedback.

types List of data formats set in the dragstart event.

getData(format) Returns the data being dragged.

setData(format, data) Sets the data being dragged.

clearData([format]) Removes data of the specified format (or all formats if omitted).

files Returns a list of files being dragged, if any.

Table B.10. dataTransfer item

Attribute/method Description

kind This is the kind of item being dragged (string or file).
type This is the data item type string.
getAsString(callback) If the data kind is string, this invokes the callback with the string data as an argument.
getAsFile() If the data kind is file, this returns a file object.
Table B.11. Drag-and-drop events

Event name Description

dragstart Fires on the source element when the user starts to drag the source element.

drag Fires on the source element as the user is dragging the source element.

dragenter Fires on the target element when the user drags the source element into it.

dragleave Fires on the target element when the user drags the source element out of it.

dragover Fires on the target element as the user is dragging the source element over it.

drop Fires on the target element when the user drops the source element on it.

dragend Fires on the source element when the user stops dragging the source element.

Table B.10 lists the attributes and methods of the dataTransfer item. The
dataTransfer item defines an object being dragged to the drop zone.

Table B.11 lists the drag-and-drop events. When the application listens for these events, it
can use the event object to gain access to the dataTransfer object or dataTrans-
fer items. To access the dataTransfer object, use e.dataTransfer , where e is
an event object. To access dataTransfer items, use e.dataTransfer.items ,
where items is a list of dataTransfer items.