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
<div id="div1">
<span id="drag" draggable="true">drag me to the other box</span>
</div>
<div id="div2"></div>
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 |