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

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

types property (dataTransfer)

Browser support:

	3.5		5

Returns a DOMStringList collection that contains the available data formats for the first item of the current drag-and-drop operation.

Note: The dataTransfer object and its types property are supported in Firefox from version 3.5 and Safari from version 5. Although the types property is supported in Safari 4, it always returns null.

To get the specified formatted data of the first dragged item, use the getData method.

The dataTransfer object provides support for dragging multiple items in Firefox. If you need the available data formats for multiple items, use the mozTypesAt method instead of the types property.

Syntax:

object.types;

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

This property is read-only.

Possible values:

A DOMStringList collection that represents the available data formats.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the files property:

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

        function OnDropTarget (event) {
            if (event.dataTransfer) {
                if (event.dataTransfer.types) {
                    var infoTable = document.getElementById ("info");
                    var infoTableBody = infoTable.tBodies[0];
                    infoTableBody.innerHTML = "";
                    
                    for (var i = 0; i < event.dataTransfer.types.length; i++) {
                        var row = infoTableBody.insertRow (-1);
                        var cell = row.insertCell (0);
                        var type = event.dataTransfer.types[i];
                        cell.textContent = type;
                        cell = row.insertCell (1);
                        cell.textContent = event.dataTransfer.getData (type);
                    }
                }
                else {
                    alert ("Your browser does not support the types 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 text or a <a href="#">link</a> or a file (from outside this browser window) and drop it into the red field.
    If you drop more than one file, the table below the red field will only contain information about the first dropped file.
    <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 first dropped item.
    <table id="info" border="2px">
        <thead>
            <tr>
                <th>Data type</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>