You are here: Reference > JavaScript > client-side > event handling > properties > mozItemCount (dataTransfer)

mozItemCount property (dataTransfer)

Browser support:
3.5
Returns the number of dragged items during the current drag-and-drop operation.
Note: The dataTransfer object and its mozItemCount property are supported in Firefox from version 3.5.
Use the mozTypesAt and mozGetDataAt methods together to get all dragged data.

Syntax:

object.mozItemCount;
You can find the related objects in the Supported by objects section below.
This property is read-only.

Possible values:

Integer that retrieves the number of dragged items.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the mozItemCount property:
<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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content