Interface DataTransfer

The DataTransfer object is used to hold any data transferred between contexts, such as a drag and drop operation, or clipboard read/write.

MDN Reference

interface DataTransfer {
    dropEffect: "link" | "copy" | "none" | "move";
    effectAllowed:
        | "link"
        | "copy"
        | "none"
        | "move"
        | "copyLink"
        | "copyMove"
        | "linkMove"
        | "all"
        | "uninitialized";
    files: FileList;
    items: DataTransferItemList;
    types: readonly string[];
    clearData(format?: string): void;
    getData(format: string): string;
    setData(format: string, data: string): void;
    setDragImage(image: Element, x: number, y: number): void;
}
Index

Properties

dropEffect effectAllowed files items types

Methods

clearData getData setData setDragImage

Properties

dropEffect: "link" | "copy" | "none" | "move"

The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation.

MDN Reference

effectAllowed:
    | "link"
    | "copy"
    | "none"
    | "move"
    | "copyLink"
    | "copyMove"
    | "linkMove"
    | "all"
    | "uninitialized"

The DataTransfer.effectAllowed property specifies the effect that is allowed for a drag operation.

MDN Reference

files: FileList

The files read-only property of DataTransfer objects is a list of the files in the drag operation.

MDN Reference

items: DataTransferItemList

The read-only items property of the DataTransfer interface is a A DataTransferItemList object containing DataTransferItem objects representing the items being dragged in a drag operation, one list item for each object being dragged.

MDN Reference

types: readonly string[]

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

MDN Reference

Methods

  • The DataTransfer.clearData() method removes the drag operation's drag data for the given type.

    MDN Reference

    Parameters

    • Optionalformat: string

    Returns void

  • The DataTransfer.getData() method retrieves drag data (as a string) for the specified type.

    MDN Reference

    Parameters

    • format: string

    Returns string

  • The DataTransfer.setData() method sets the drag operation's drag data to the specified data and type.

    MDN Reference

    Parameters

    • format: string
    • data: string

    Returns void

  • 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.

    MDN Reference

    Parameters

    Returns void

Settings

Member Visibility

On This Page

Properties
Methods