Web/API/DataTransferItemList/length

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

[[../../../../../../../mdn.mozillademos.org/en-US/docs/Web/API/DataTransferItemList/length%24samples/Example_Drag_and_Drop106e|Drag and Drop demo link]]

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'length' in that specification.	Living Standard
HTML 5.1The definition of 'length' in that specification.	Recommendation	Not included in W3C HTML5 Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`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

DataTransferItemList.length by Mozilla Contributors is licensed under CC-BY-SA 2.5.