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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content