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

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

mozClearDataAt method (dataTransfer)

Browser support:

	3.5

Removes the specified formatted data associated to the dragged item at the specified position from the current drag-and-drop operation.

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

The mozClearDataAt method is an extension of the clearData method for dragging multiple items.

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 mozClearDataAt and mozSetDataAt methods can only be called in a handler for the ondragstart event. The call to the mozClearDataAt and mozSetDataAt methods in other cases raises an exception.

Syntax:

object.mozClearDataAt (dataFormat, index);

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

Parameters:

dataFormat

Required. String that specifies the data format to clear. An empty string means all format needs to be cleared. For the available data formats, use the mozTypesAt method.

The following list only contains some of the possible data formats, the complete list is much more extensive.

text/html

HTML format

text/plain

Text format

text/uri-list

URI format

index

Required. A zero-based integer that specifies the position of the item in the list of dragged items. Use the mozItemCount property to retrieve the number of dragged items.

Return value:

This method has no return value.

If no data format is left for an item after the call to the mozClearDataAt method, the item is removed from the list of dragged items.

Example HTML code 1:

This example illustrates the use of the mozClearDataAt, mozGetDataAt and mozSetDataAt methods.

<head>
    <script type="text/javascript">
        function OnDragStart (event) {
            if (event.dataTransfer) {
                if (event.dataTransfer.mozGetDataAt) {
                    var textData = event.dataTransfer.mozGetDataAt ("text/plain", 0);
                    if (textData) {
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:red'>" + textData + "</span>", 0);
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:green'>" + textData + "</span>", 1);
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:blue'>" + textData + "</span>", 2);
                        event.dataTransfer.mozClearDataAt ("text/plain", 0);
                    }
                }
            }
        }

        function OnDropTarget (event) {

            if (event.dataTransfer) {
                if (event.dataTransfer.mozGetDataAt) {
                    var htmlData = "";
                    for (var i = 0; i < event.dataTransfer.mozItemCount; i++) {
                        htmlData += event.dataTransfer.mozGetDataAt ("text/html", i);
                    }

                    var targetDiv = document.getElementById ("target");
                    targetDiv.innerHTML = htmlData;
                }
                else {
                    alert ("Your browser does not support the mozGetDataAt method.");
                }
            }
            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 yellow zone.
    </div>
    <div id="target" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);"
        style="width:300px; height:100px; background-color:#f0f080;">
    </div>
</body>