You are here: Reference > JavaScript > client-side > event handling > properties > mozItemCount (dataTransfer)
mozItemCount property (dataTransfer)
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:
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?
|
Supported by objects:
Related pages:
External links:
User Contributed Comments