The read-only length
property of the DataTransferItemList
interface returns the number of items currently in the drag item list.
Syntax
length = DataTransferItemList.length;
Value
The number of drag data items in the list, or 0 if the list is empty or disabled. The drag item list is considered to be disabled if the item list's DataTransfer
object is not associated with a drag data store.
Example
This example shows the use of the length
property.
JavaScript
function dragstart_handler(ev) { console.log("dragStart"); // Add this element's id to the drag payload so the drop handler will // know which element to add to its tree var dataList = ev.dataTransfer.items; dataList.add(ev.target.id, "text/plain"); // Add some other items to the drag payload dataList.add("<p>... paragraph ...</p>", "text/html"); dataList.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); var data = ev.dataTransfer.items; // Loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // This item is the target node data[i].getAsString(function (s){ ev.target.appendChild(document.getElementById(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // Drag data item is HTML data[i].getAsString(function (s){ console.log("... Drop: HTML = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // Drag data item is URI data[i].getAsString(function (s){ console.log("... Drop: URI = " + s); }); } } } function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move" } function dragend_handler(ev) { console.log("dragEnd"); var dataList = ev.dataTransfer.items; // Clear any remaining drag data dataList.clear(); }
HTML
<div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
CSS
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'length' in that specification. |
Living Standard | |
HTML 5.1 The definition of 'length' in that specification. |
Recommendation | Not included in W3C HTML5 Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
length | Chrome Full support 13 | Edge Full support 12 | Firefox Full support 50 | IE No support No | Opera Full support 12 | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 50 | Opera Android No support No | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support