Windows Dev Center

The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

DataTransfer object

[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.]

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.) Removes one or more data formats from the clipboard through the dataTransfer object. For the clipboardData object, this method clears all formats.


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


(Deprecated.) 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 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);



© 2015 Microsoft