In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > setData (dataTransfer)

setData method (dataTransfer)

Browser support:

	3.5

Specifies the data and its format for the current drag-and-drop operation.

Note: The dataTransfer object and its setData method are supported in Firefox from version 3.5.

In Firefox, the modification of the dragged data is not allowed during the drag operation only at the start point of a drag operation. That's why, the clearData and setData methods can only be called in a handler for the ondragstart event. The call to the clearData and setData methods in other cases raises an exception.

Google Chrome and Safari works similar to the Firefox, the clearData and setData methods can only be called in a handler for the ondragstart event, although the clearData method has no any effect. It seems to be a bug in Google Chrome and Safari. Furthermore the getData method only works for the following drag events in Google Chrome and Safari: ondragenter, ondragover, ondragleave, ondrop. That's why, the dragged data cannot be retrieved by the source element. It seems to be another bug.

Note: The dataTransfer object provides support for dragging multiple items in Firefox. You can only access to the first dragged item with the setData method. To access to multiple items, use the mozSetDataAt method instead.

Syntax:

object.setData (dataFormat, data);

You can find the related objects in the Supported by objects section below.

Parameters:

dataFormat

Required. String that specifies the format of the data to assign.
In Firefox, Google Chrome and Safari, the data format can be an arbitrary string. If data for the specified format already exists, it is replaced with the new value. If the specified data format does not exist yet, both new data and its format are added to the current data transfer.

In Internet Explorer, the following data formats are supported:

Text

Text format

URL

URL format

data

Required. String that specifies the data to assign to the current data transfer.

Return value:

Boolean. One of the following values:

false	Cannot add the data.
true	The operation was successful.

Example HTML code 1:

This example illustrates the use of the clearData, getData and setData methods. Note that the getData method always returns an empty string in a handler for the ondragstart event in Safari and Google Chrome so the dropped text's letters won't be in reverse order.

<head>
    <script type="text/javascript">
        function OnDragStart (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);
                    // always empty in Safari and Google Chrome
                if (textData) {
                    if (textData.length > 20) {
                        event.dataTransfer.clearData (format);
                    }
                    else {
                        var reverseText = "";
                        for (var i = 0; i < textData.length; i++) {
                            reverseText += textData.charAt (textData.length - i - 1);
                        }
                        event.dataTransfer.setData (format, reverseText);
                    }
                }
            }
        }

        function OnDropTarget (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);
                if (!textData) {
                    textData = "<span style='color:red'>The data transfer contains no text data.</span>";
                }
                
                var targetDiv = document.getElementById ("target");
                targetDiv.innerHTML = textData;
            }
            else {
                alert ("Your browser does not support the dataTransfer object.");
            }
            
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
            return false;
        }
    </script>
</head>
<body>
    <div ondragstart="OnDragStart (event)" style="width:300px; height:100px; background-color:#80f0f0;">
        Select and drag some text from this field and drop into the green zone. The dropped text's letters will be in reverse order.
        The length of the dragged text cannot be longer than 20 characters!
    </div>
    <div id="target" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);"
        style="width:300px; height:100px; background-color:#80f080;">
    </div>
</body>