DataTransfer: items-Eigenschaft - Web-APIs

DataTransfer: items-Eigenschaft - Web-APIs | MDN

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2018 browserübergreifend verfügbar.

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

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

Spezifikation
HTML # dom-datatransfer-items-dev

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.