DataTransfer: getData() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die DataTransfer.getData()-Methode ruft die Drag-Daten (als Zeichenfolge) für den angegebenen Typ ab. Wenn der Drag-Vorgang keine Daten enthält, gibt diese Methode eine leere Zeichenfolge zurück.

Beispieldaten-Typen sind text/plain und text/uri-list.

Syntax

getData(format)

Parameter

format: Eine Zeichenfolge, die den Typ der abzurufenden Daten darstellt.

Rückgabewert

Eine Zeichenfolge, die die Drag-Daten für das angegebene format darstellt. Wenn der Drag-Vorgang keine Daten hat oder der Vorgang keine Daten für das angegebene format hat, gibt diese Methode eine leere Zeichenfolge zurück.

Beachten Sie, dass DataTransfer.getData() möglicherweise keinen erwarteten Wert zurückgibt, da es das Lesen und Schreiben von Daten nur für bestimmte Ereignisse erlaubt. Während der dragstart- und drop-Ereignisse ist der Zugriff auf die Daten sicher. Für alle anderen Ereignisse sollten die Daten als nicht verfügbar betrachtet werden. Trotzdem können die Elemente und ihre Formate weiterhin aufgezählt werden.

Beispiele

Dieses Beispiel zeigt die Verwendung der DataTransfer-Objekts getData()- und setData()-Methoden.

HTML

html

<div id="div1">
  <span id="drag" draggable="true">drag me to the other box</span>
</div>
<div id="div2"></div>

CSS

css

#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const dragElement = document.getElementById("drag");

dragElement.addEventListener("dragstart", drag);
div1.addEventListener("dragover", allowDrop);
div2.addEventListener("dragover", allowDrop);
div1.addEventListener("drop", drop);
div2.addEventListener("drop", drop);

function allowDrop(allowDropEvent) {
  allowDropEvent.target.style.color = "blue";
  allowDropEvent.preventDefault();
}

function drag(dragEvent) {
  dragEvent.dataTransfer.setData("text", dragEvent.target.id);
  dragEvent.target.style.color = "green";
}

function drop(dropEvent) {
  dropEvent.preventDefault();
  const data = dropEvent.dataTransfer.getData("text");
  dropEvent.target.appendChild(document.getElementById(data));
  dragElement.style.color = "black";
}

Ergebnis

Spezifikationen

Specification
HTML # dom-datatransfer-getdata-dev