dataTransfer object

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

Members

The dataTransfer object has these types of members:

Methods

The dataTransfer object has these methods.

MethodDescription
clearData

Removes one or more data formats from the clipboard through the dataTransfer object. For the clipboardData object, this method clears all formats.

getData

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

setData

Assigns data in a specified format to the dataTransfer object or the clipboardData object.

 

Properties

The dataTransfer object has these properties.

PropertyAccess typeDescription

dropEffect

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

effectAllowed

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

files

Read-only

Returns a FileList of the files being dragged.

types

Read-only

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

 

Standards information

There are no standards that apply here.

Remarks

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.

Examples

This example demonstrates a drag-and-drop operation.


<!DOCTYPE html>

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

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

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

    document.addEventListener("dragover", function (evt) {
      ++dragoverEventCounter;
      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.target.textContent = evt.dataTransfer.getData('text');
    }, false);
  </script>
</body>
</html>

 

 

Show:
© 2014 Microsoft. All rights reserved.