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 der Data-Transfer-Items in einer Drag-Operation. Die Liste enthält ein Element für jedes Objekt in der Operation, und wenn die Operation keine Elemente hatte, ist die Liste leer.

Wert

Ein DataTransferItemList-Objekt, das DataTransferItem-Objekte enthält, die die in einer Drag-Operation gezogenen Elemente repräsentieren. Es gibt genau ein Listenelement für jedes gezogene Objekt. Wenn die Drag-Operation keine Daten hatte, ist die Liste leer.

Beispiele

Protokollierung der gezogenen Elemente

Dieses Beispiel verwendet items, um Informationen über gezogene Elemente zu protokollieren.

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

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