DataTransfer object

Provides access to predefined clipboard formats for use in drag-and-drop operations.

HTML5 A vocabulary and associated APIs for HTML and XHTML



The DataTransfer object has these types of members:


The DataTransfer object has these methods.


(Deprecated as of Microsoft Edge.) Removes one or more data formats from the clipboard through the dataTransfer object. For the clipboardData object, this method clears all formats.


(Deprecated as of Microsoft Edge.) Gets the data in the specified format from the clipboard through the dataTransfer object or the clipboardData object.


(Deprecated as of Microsoft Edge.) Assigns data in a specified format to the dataTransfer object or the clipboardData object.



The DataTransfer object has these properties.

PropertyAccess typeDescription


Sets or gets the type of drag-and-drop operation and the type of cursor to display.


Sets or gets which data transfer operations are allowed for the object on the source element.



Returns a FileList of the files being dragged.



Returns a DataTransferItemsList for data being dragged.



Returns a string list of formats that were sent in the ondragstart event.


Standards information


Important  This object has been updated for HTML5-compliant behavior as of Microsoft Edge. The getData, setData, and clearData methods have all been deprecated in Microsoft Edge, in favor of the add, remove, and clear methods of the DataTransferItemList object. You can access the DataTransferItemList from the DataTransfer.items property. For Internet Explorer 11, you can continue to use the clearData, getData, and setData methods.

The dataTransfer object makes it possible to customize the handling of drag-and-drop operations. It is available through the event object.

The dataTransfer object is used in source and target events. Typically, the setData method is used with source events to provide information about the data being transferred. In contrast, the getData method is used with target events to stipulate which data and data formats to retrieve.

This object is available in script as of Microsoft Internet Explorer 5.


This example demonstrates a drag-and-drop operation.

<!DOCTYPE html>

  <title>Drag and Drop</title>
    .dragDropBoxes {
      width: 10em;
      height: 1em;
      background-color: orange;
      margin-bottom: 10px;
      padding: 10px;
      text-align: center;

  <div id="dragSource" class="dragDropBoxes" draggable="true">Draggable Text</div>
  <div id="dragTarget" class="dragDropBoxes">Drag Text Here</div>
    var dragoverEventCounter = 0;

    document.getElementById('dragSource').addEventListener('dragstart', function(evt) {
      console.log("The 'dragstart' event fired.");
    }, false);

    document.addEventListener("dragover", function (evt) {
      if (dragoverEventCounter == 1) {
        console.log("One or more 'dragover' events fired.");
      evt.preventDefault(); // Prevent the default behavior in order to enable dropping.
    }, false);

    document.getElementById('dragTarget').addEventListener("drop", function (evt) {
      console.log("The 'drop' event fired.");
      evt.preventDefault(); // Prevent the default action to open as link for some elements.
      document.getElementById('dragSource').textContent = ""; = evt.dataTransfer.getData('text');
    }, false);