Export (0) Print
Expand All
go
Expand Minimize

setData method

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 valueDescription
true

The data was successfully added.

false

The data was not added.

 

Standards information

There are no standards that apply here.

Remarks

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


<!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>

See also

clipboardData
dataTransfer
Reference
clearData
getData
Conceptual
About DHTML Data Transfer

 

 

Show:
© 2014 Microsoft