DataTransferItemList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
TheDataTransferItemList object is a list ofDataTransferItem objects representing items being dragged. During adrag operation, eachDragEvent has adataTransfer property and that property is aDataTransferItemList.
The individual items can be accessed using thebracket notation[].
DataTransferItemList was primarily designed for theHTML Drag and Drop API, and is still specified in the HTML drag-and-drop section, but it is now also used by other APIs, such asClipboardEvent.clipboardData andInputEvent.dataTransfer. Documentation ofDataTransferItemList will primarily discuss its usage in drag-and-drop operations, and you should refer to the other APIs' documentation for usage ofDataTransferItemList in those contexts.
This interface has no constructor.
Instance properties
DataTransferItemList.lengthRead onlyAn
unsigned longthat is the number of drag items in the list.
Instance methods
DataTransferItemList.add()Adds an item (either a
Fileobject or a string) to the drag item list and returns aDataTransferItemobject for the new item.DataTransferItemList.remove()Removes the drag item from the list at the given index.
DataTransferItemList.clear()Removes all of the drag items from the list.
Example
This example shows how to use drag and drop.
HTML
<div> <p draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p></div><div>Drop Zone</div>CSS
div { margin: 0em; padding: 2em;}#source { color: blue; border: 1px solid black;}#target { border: 1px solid black;}JavaScript
const source = document.getElementById("source");const target = document.getElementById("target");source.addEventListener("dragstart", (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 const 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");});source.addEventListener("dragend", (ev) => { console.log("dragEnd"); const dataList = ev.dataTransfer.items; // Clear any remaining drag data dataList.clear();});target.addEventListener("drop", (ev) => { console.log("Drop"); ev.preventDefault(); // Loop through the dropped items and log their data for (const item of ev.dataTransfer.items) { if (item.kind === "string" && item.type.match(/^text\/plain/)) { // This item is the target node item.getAsString((s) => { ev.target.appendChild(document.getElementById(s)); }); } else if (item.kind === "string" && item.type.match(/^text\/html/)) { // Drag data item is HTML item.getAsString((s) => { console.log(`… Drop: HTML = ${s}`); }); } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) { // Drag data item is URI item.getAsString((s) => { console.log(`… Drop: URI = ${s}`); }); } }});target.addEventListener("dragover", (ev) => { console.log("dragOver"); ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move";});Result
Specifications
| Specification |
|---|
| HTML # the-datatransferitemlist-interface |