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

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

mozGetDataAt method (dataTransfer)

Browser support:

	3.5

Retrieves 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 mozGetDataAt method are supported in Firefox from version 3.5.

The mozGetDataAt method is an extension of the getData method for dragging multiple items.

Syntax:

object.mozGetDataAt (dataFormat, index);

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.
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:

String that retrieves the specified formatted data from the current drag-and-drop operation. If no data exists for the specified format or position, the mozGetDataAt method returns null.

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>