setData method

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

Syntax

object.setData(format, data)

Parameters

format [in]

Type: String

A String that specifies the format of the data to be transferred, using one of the following values.

Text: Transfers data formatted as text.
URL: Transfers data formatted as a URL.

data [in]

Type: Variant

A Variant of type String that specifies the data supplied by the source object. This information can be descriptive text, a source path to an image, or a URL for an anchor. When you pass "URL" as the format parameter, you must use the data parameter to provide the location of the object that is transferred.

Return value

Type: Boolean

Boolean. Returns one of the following possible values.

Return value	Description
true	The data was successfully added.
false	The data was not added.

Standards information

There are no standards that apply here.

Remarks

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.

The value of the format parameter is not case-sensitive.

Examples

This example uses the setData method and the getData method with the dataTransfer object.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/setDataEX.htm

JavaScript


<!DOCTYPE HTML>
<html>

<head>
  <title>HTML5 Drag and Drop</title>
  <style type="text/css">
    #dragTarget {
      width: 30px;
      height: 30px;
      padding: 4px;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <p>Drag the circle into the box.</p>
  <div style="padding-left: 1em;">
    <img id="dragSource" src="http://samples.msdn.microsoft.com/Workshop/graphics/black.gif" draggable="true" />
    <div id="dragTarget"></div>
  </div>
  <script>
    var dragoverEventCount = 0;
    var dragSource = document.getElementById('dragSource');
    var dragTarget = document.getElementById('dragTarget');

    dragSource.addEventListener('dragstart', function (evt) {
      console.log("The dragstart event handler fired, and evt.target = " + evt.target);
      evt.dataTransfer.setData('text', evt.target.id);
    }, false);

    dragTarget.addEventListener('dragover', function (evt) {
      ++dragoverEventCount;
      if (dragoverEventCount == 1) {
        console.log("The dragover event handler fired one or more times, and evt.target = " + evt.target);
      }
      evt.preventDefault(); // Enable dropping.
    }, false);

    dragTarget.addEventListener('drop', function (evt) {
      console.log("The drop event handler fired, and evt.target = " + evt.target);
      var data = evt.dataTransfer.getData('text');

      evt.target.appendChild(document.getElementById(data));
      evt.preventDefault();
    }, false);
  </script>
</body>
</html>