Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

dataTransfer object

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


The dataTransfer object has these types of members:


The dataTransfer object has these methods.


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


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


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 string list of formats that were sent in the ondragstart event.


Standards information

There are no standards that apply here.


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 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.");
      evt.dataTransfer.setData('text', evt.target.textContent);
    }, 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.target.textContent = evt.dataTransfer.getData('text');
    }, false);



© 2014 Microsoft