DataTransfer: items property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
The read-onlyitems property of theDataTransfer interface is alist of thedata transfer items in a drag operation. The list includes one item for each item in the operation and if the operation had no items, the list is empty.
Value
ADataTransferItemList object containingDataTransferItemobjects representing the items being dragged in a drag operation, one list item for eachobject being dragged. If the drag operation had no data, the list is empty.
Examples
Logging dragged items
This example usesitems to log information about dragged items.
HTML
html
<ul> <li draggable="true">Drag Item 1 to the Drop Zone</li> <li draggable="true">Drag Item 2 to the Drop Zone</li></ul><div>Drop Zone</div><button>Reset</button>CSS
css
div { margin: 0em; padding: 2em;}#target { border: 1px solid black;}JavaScript
js
function dragstartHandler(ev) { console.log(`dragstart: target.id = ${ev.target.id}`); // Add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.effectAllowed = "move";}function dropHandler(ev) { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); // Print each item's "kind" and "type" if (ev.dataTransfer.items) { for (const item of ev.dataTransfer.items) { console.log(`kind = ${item.kind}, type = ${item.type}`); } }}function dragoverHandler(ev) { ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move";}const source1 = document.querySelector("#source1");const source2 = document.querySelector("#source2");const target = document.querySelector("#target");source1.addEventListener("dragstart", dragstartHandler);source2.addEventListener("dragstart", dragstartHandler);target.addEventListener("dragover", dragoverHandler);target.addEventListener("drop", dropHandler);const reset = document.querySelector("#reset");reset.addEventListener("click", () => document.location.reload());Result
Specifications
| Specification |
|---|
| HTML # dom-datatransfer-items-dev |