DataTransferItemList.DataTransferItem()

The DataTransferItemList() getter method implements support for accessing items in the DataTransferItemList using array-style syntax (that is DataTransferItemList[index]).

Syntax

dataItem = DataTransferItemList[index];

Parameters

index: The zero-based index of the item in the drag data list to return.

Return value

The DataTransferItem object at the specified index in the item list. If the index is less than zero or greater than or equal to the number of items in the list (as indicated by the list's length property, undefined is returned. The returned value is never null.

Example

This example shows how to use drag and drop.

<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransferItemList methods and property</title>
<meta name="viewport" content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
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("https://www.example.org","text/uri-list");
}

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  var data = event.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;
  for (var i = 0; i < dataList.length; i++) {
    dataList.remove(i);
  }
  // Clear any remaining drag data
  dataList.clear();
}
</script>
<body>
<h1>Example uses of <code>DataTransferItemList</code> methods and property</h1>
 <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>
</body>
</html>

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of 'remove()' in that specification.	Living Standard
HTML5.1 The definition of 'remove()' in that specification.	Working Draft	Not included in W3C HTML5 Recommendation

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	4	50 (50)	No support	12	No support

Feature	Android	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	No support	No support	50.0 (50)	No support	No support	No support	No support