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

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

getData method (dataTransfer)

Browser support:

	3.5

Retrieves the specified formatted data from the current drag-and-drop operation.

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

Note: 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 a bug in Google Chrome and Safari.

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

Syntax:

object.getData (dataFormat);

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 retrieve.
In Firefox, Google Chrome and Safari, the data format can be an arbitrary string (see the setData method), the types property retrieves the available data formats for the current drag operation. You can use those data formats for this parameter.
There are several data formats (depending on the type of the dragged data) that are available by default for a drag operation in Firefox, Google Chrome and Safari (such as: text/plain, text/html, text/uri-list, text/x-moz-url, application/x-moz-file, etc.). The following list only contains the data formats supported by Internet Explorer.

Supported data formats:

Text

Text format

URL

URL format

Return value:

String that retrieves the specified formatted data from the current drag-and-drop operation. If no data exists for the specified format, the getData method returns null in Internet Explorer, an empty string in Firefox and undefined in Google Chrome and Safari.

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>