Drag and Drop

The DataTransfer.clearData() method removes the drag operation's drag data for the given type. If data for the given type does not exist, this method does nothing.

The DataTransfer constructor creates a new DataTransfer object instance.

The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur.

The DataTransfer.effectAllowed property specifies the effect that is allowed for a drag operation. The copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. The move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that…

The files read-only property of DataTransfer objects is a list of the files in the drag operation. If the operation includes no files, the list is empty.

The DataTransfer.getData() method retrieves drag data (as a string) for the specified type. If the drag operation does not include data, this method returns an empty string.

The read-only items property of the DataTransfer interface is a DataTransferItemList of the DataTransferItem in a drag operation. The list includes one item for each item in the operation and if the operation had no items, the list is empty.

The DataTransfer.setData() method sets the drag operation's drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the DataTransfer.types list will be the new type. If data for the given type already exists, the existing data is replaced in the same…

When a drag occurs, a translucent image is generated from the drag target (the element the HTMLElement/dragstart_event event is fired at), and follows the mouse pointer during the drag. This image is created automatically, so you do not need to create it yourself. However, if a custom image is desired, the DataTransfer.setDragImage() method can be used to…

The DataTransfer.types read-only property returns the available types that exist in the DataTransfer.items.

The DataTransferItem object represents one drag data item. During a drag operation, each DragEvent has a DragEvent.dataTransfer property which contains a DataTransferItemList of drag data items. Each item in the list is a DataTransferItem object.

If the item is a file, the DataTransferItem.getAsFile() method returns the drag data item's File object. If the item is not a file, this method returns null.

The getAsFileSystemHandle() method of the DataTransferItem interface returns a Promise that fulfills with a FileSystemFileHandle if the dragged item is a file, or fulfills with a FileSystemDirectoryHandle if the dragged item is a directory.

The DataTransferItem.getAsString() method invokes the given callback with the drag data item's string data as the argument if the item's DataTransferItem.kind is a Plain unicode string (i.e., kind is string).

The read-only DataTransferItem.kind property returns the kind–a string or a file–of the DataTransferItem object representing the drag data item.

The read-only DataTransferItem.type property returns the type (format) of the DataTransferItem object representing the drag data item. The type is a Unicode string generally given by a MIME type, although a MIME type is not required.

The DataTransferItemList object is a list of DataTransferItem objects representing items being dragged. During a drag operation, each DragEvent has a DragEvent.dataTransfer property and that property is a DataTransferItemList.

The DataTransferItemList.add() method creates a new DataTransferItem using the specified data and adds it to the drag data list. The item may be a File or a string of a given type. If the item is successfully added to the list, the newly-created DataTransferItem object is returned.

The DataTransferItemList method clear() removes all DataTransferItem objects from the drag data items list, leaving the list empty.

The read-only length property of the DataTransferItemList interface returns the number of items currently in the drag item list.

The DataTransferItemList.remove() method removes the DataTransferItem at the specified index from the list. If the index is less than zero or greater than one less than the length of the list, the list will not be changed.

The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

The DragEvent.dataTransfer read-only property holds the drag operation's data (as a DataTransfer object).

This constructor is used to create a synthetic DragEvent object.

The drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.

The dragend event is fired when a drag operation ends (by releasing a mouse button or hitting the escape key).

The dragenter event is fired when a dragged element or text selection enters a valid drop target. The target object is the immediate user selection (the element directly indicated by the user as the drop target), or the body element.

The draggable property of the HTMLElement interface gets and sets a Boolean primitive indicating if the element is draggable.

The dragleave event is fired when a dragged element or text selection leaves a valid drop target.

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

The dragstart event is fired when the user starts dragging an element or text selection.

The drop event is fired when an element or text selection is dropped on a valid drop target. To ensure that the drop event always fires as expected, you should always include a preventDefault() call in the part of your code which handles the dragover event.