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

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

mozTypesAt method (dataTransfer)

Browser support:

	3.5

Returns a DOMStringList collection that contains the available data formats for the item at the specified position in the current drag-and-drop operation.

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

The mozTypesAt method is an extension of the types property for dragging multiple items.

To get the specified formatted data of a dragged item, use the mozGetDataAt method.

Syntax:

object.mozTypesAt (index);

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

Parameters:

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:

A DOMStringList collection that represents the available data formats.

Example HTML code 1:

This example illustrates the use of the mozTypesAt method.

<head>
    <script type="text/javascript">
        function OnDropBody (event) {
            alert ("Please drop the items into the red field.");
            return false;
        }

        function OnDropTarget (event) {
            if (event.dataTransfer) {
                if (event.dataTransfer.mozItemCount) {
                    var infoTable = document.getElementById ("info");
                    var infoTableBody = infoTable.tBodies[0];
                    infoTableBody.innerHTML = "";

                    for (var itemIdx = 0; itemIdx < event.dataTransfer.mozItemCount; itemIdx++) {
                        var typeList = event.dataTransfer.mozTypesAt (itemIdx);
                        for (var typeIdx = 0; typeIdx < typeList.length; typeIdx++) {
                            var row = infoTableBody.insertRow (-1);
                            var cell = row.insertCell (0);
                            cell.textContent = (itemIdx+1) + ". item";
                            cell = row.insertCell (1);
                            var type = typeList[typeIdx];
                            cell.textContent = type;
                            cell = row.insertCell (2);
                            try {
                                cell.textContent = event.dataTransfer.mozGetDataAt (type, itemIdx);
                            }
                            catch (e) {
                                cell.textContent = e.message;
                            }
                        }
                    }
                }
                else {
                    alert ("Your browser does not support the mozItemCount property.");
                }
            }
            else {
                alert ("Your browser does not support the dataTransfer property.");
            }
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
            return false;
        }
    </script>
</head>
<body ondragenter="return false;" ondragover="return false;" ondrop="return OnDropBody (event);">
    Please drag some files from outside this browser window and drop them into the red field.
    <br /><br />
    <div ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);"
        style="width:300px; height:100px; background-color:#f08080;">
    </div>
    <br /><br />
    The following table contains the available data formats and their corresponding values for the dropped items.
    <table id="info" border="2px">
        <thead>
            <tr>
                <th>Item</th>
                <th>Data type</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>