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

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

clearData method (dataTransfer)

Browser support:

	3.5

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

Note: The dataTransfer object and its clearData 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 clearData method. To access to multiple items, use the mozClearDataAt method instead.

Syntax:

object.clearData ([dataFormat]);

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

Parameters:

dataFormat

Optional. String that specifies the data format to clear. If this parameter is not specified, all data formats are cleared.
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:

File

File format

HTML

HTML format

Image

Image format

Text

Text format

URL

URL format

Return value:

This method has no return value.

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>