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-only items property of the DataTransfer interface is a
list of the data 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
A DataTransferItemList object containing DataTransferItem
objects representing the items being dragged in a drag operation, one list item for each
object being dragged. If the drag operation had no data, the list is empty.
Examples
>Logging dragged items
This example uses items to log information about dragged items.
HTML
html
<ul>
<li id="source1" draggable="true">Drag Item 1 to the Drop Zone</li>
<li id="source2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>
<button id="reset">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> |