DataTransfer
The DataTransfer object is used to hold any data transferred between contexts, such as a drag and drop operation, or clipboard read/write. It may hold one or more data items, each of one or more data types.
Methods
clearData()
clearData(format?): void;
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.
Parameters
| Parameter | Type |
|---|---|
format? | string |
Returns
void
getData()
getData(format): string;
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.
Parameters
| Parameter | Type |
|---|---|
format | string |
Returns
string
setData()
setData(format, data): void;
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 types list will be the new type. If data for the given type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.
Parameters
| Parameter | Type |
|---|---|
format | string |
data | string |
Returns
void
setDragImage()
setDragImage(
image,
x,
y
): void;
When a drag occurs, a translucent image is generated from the drag target (the element the dragstart 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 set the custom image to be used. The image will typically be an <img> element but it can also be a <canvas> or any other visible element.
Parameters
| Parameter | Type |
|---|---|
image | Element |
x | number |
y | number |
Returns
void
Properties
dropEffect
dropEffect: "none" | "link" | "copy" | "move";
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.
effectAllowed
effectAllowed:
| "none"
| "link"
| "copy"
| "move"
| "copyLink"
| "copyMove"
| "linkMove"
| "all"
| "uninitialized";
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 some form of relationship or connection will be created between the source and drop locations.
files
readonly files: FileList;
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.
items
readonly items: DataTransferItemList;
The read-only items property of the DataTransfer interface is a list of the data transfer items 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.
types
readonly types: readonly string[];
The DataTransfer.types read-only property returns the available types that exist in the items.