DataTransfer: Methode getData()

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 Ziehdaten (als Zeichenkette) für den angegebenen Typ ab. Wenn der Ziehvorgang keine Daten enthält, gibt diese Methode eine leere Zeichenkette zurück.

Beispieldatentypen sind text/plain und text/uri-list.

Syntax

getData(format)

Parameter

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

Eine Zeichenkette, die die Ziehdaten für das angegebene format darstellt. Wenn der Ziehvorgang keine Daten enthält oder keine Daten für das angegebene format vorhanden sind, gibt diese Methode eine leere Zeichenkette zurück.

Nachteile

Datenverfügbarkeit

Die HTML Drag and Drop Specifikation gibt einen drag data store mode vor. Dies kann zu unerwartetem Verhalten führen, wobei die Methode DataTransfer.getData() möglicherweise keinen erwarteten Wert zurückgibt, da nicht alle Browser diese Einschränkung durchsetzen.

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 deren Formate weiterhin aufgezählt werden.

Beispiele

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

HTML

html

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
    >drag me to the other box</span
  >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

css

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

JavaScript

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));
  document.getElementById("drag").style.color = "black";
}

Ergebnis

Spezifikationen

Specification
HTML Standard # dom-datatransfer-getdata-dev

Browser-Kompatibilität

BCD tables only load in the browser