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. Wenn der Drag-Vorgang keine Daten einschließt, 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.

Rückgabewert

Eine Zeichenkette, 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 Zeichenkette zurück.

Beachten Sie, dass DataTransfer.getData() möglicherweise keinen erwarteten Wert zurückgibt, da es nur das Lesen und Schreiben von Daten für bestimmte Events erlaubt. Während der dragstart- und drop-Events ist es sicher, auf die Daten zuzugreifen. Für alle anderen Events 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-Objektmethoden getData() und setData().

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