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

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

Syntax

js
getData(format)

Parameter

format

Eine Zeichenkette, die den Typ der abzurufenden Daten darstellt.

Rückgabewert

Eine Zeichenkette, die die Drag-Daten für das angegebene format darstellt. Wenn der Drag-Vorgang keine Daten enthält oder keine Daten für das angegebene format vorliegen, gibt diese Methode eine leere Zeichenkette zurück.

Beachten Sie, dass DataTransfer.getData() möglicherweise nicht den erwarteten Wert zurückgibt, da es nur erlaubt, Daten für bestimmte Ereignisse zu lesen und zu schreiben. Während der Ereignisse dragstart und drop ist es sicher, auf die Daten zuzugreifen. 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-Objekt-Methoden getData() und setData().

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

js
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
# dom-datatransfer-getdata-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch