Baseline Widely available
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
.
format
Eine Zeichenkette, die den Typ der abzurufenden Daten darstellt.
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.
Dieses Beispiel zeigt die Verwendung der DataTransfer
-Objektmethoden getData()
und setData()
.
<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 Browser-Kompatibilität Siehe auch MDN-Feedback-Box War diese Ãbersetzung hilfreich?
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4