DataTransfer: items-Eigenschaft
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.
Die schreibgeschützte items-Eigenschaft der DataTransfer-Schnittstelle ist eine
Liste von Datenübertragungs-Elementen in einem Ziehvorgang. Die Liste enthält ein Element für jedes Element im Vorgang und ist leer, wenn der Vorgang keine Elemente hatte.
Wert
Ein DataTransferItemList-Objekt, das DataTransferItem
Objekte enthält, die die Elemente darstellen, die in einem Ziehvorgang gezogen werden, wobei die Liste ein Element für jedes
Objekt enthält, das gezogen wird. Wenn der Ziehvorgang keine Daten hatte, ist die Liste leer.
Beispiele
Protokollierung gezogener Elemente
Dieses Beispiel verwendet items, um Informationen über gezogene Elemente zu protokollieren.
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
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
JavaScript
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());
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-datatransfer-items-dev |
Browser-Kompatibilität
Loading…