DataTransfer: clearData() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die DataTransfer.clearData()
Methode entfernt die Drag-Daten des Ziehvorgangs für den angegebenen Typ. Wenn keine Daten für den angegebenen Typ vorhanden sind, macht diese Methode nichts.
Wird diese Methode ohne Argumente oder mit einem leeren String aufgerufen, werden die Daten aller Typen entfernt.
Diese Methode entfernt keine Dateien aus dem Ziehvorgang, sodass es möglich ist, dass immer noch ein Eintrag mit dem Typ "Files"
in der DataTransfer.types
-Liste des Objekts verbleibt, wenn Dateien in den Ziehvorgang eingeschlossen sind.
Hinweis:
Diese Methode kann nur im Handler für das dragstart
Ereignis verwendet werden,
da dies der einzige Zeitpunkt ist, zu dem der Daten-Store des Ziehvorgangs schreibbar ist.
Syntax
clearData()
clearData(format)
Parameter
format
Optional-
Ein String, der den Typ der zu entfernenden Daten angibt. Wenn dieser Parameter ein leerer String ist oder nicht bereitgestellt wird, werden die Daten für alle Typen entfernt.
Rückgabewert
Keiner (undefined
).
Beispiele
Dieses Beispiel zeigt die Verwendung der DataTransfer
Objektmethoden
getData()
,
setData()
und
clearData()
.
HTML
<span class="tweaked" id="source" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</span>
<span class="tweaked" id="target">Drop Zone</span>
<div>Status: <span id="status">Drag to start</span></div>
<div>Data is: <span id="data">uninitialized</span></div>
CSS
span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
// Select HTML elements
const draggable = document.getElementById("source");
const droppable = document.getElementById("target");
const status = document.getElementById("status");
const data = document.getElementById("data");
let dropped = false;
// Register event handlers
draggable.addEventListener("dragstart", dragStartHandler);
draggable.addEventListener("dragend", dragEndHandler);
droppable.addEventListener("dragover", dragOverHandler);
droppable.addEventListener("dragleave", dragLeaveHandler);
droppable.addEventListener("drop", dropHandler);
function dragStartHandler(event) {
status.textContent = "Drag in process";
// Change target element's border to signify drag has started
event.currentTarget.style.border = "1px dashed blue";
// Start by clearing existing clipboards; this will affect all types since we
// don't give a specific type.
event.dataTransfer.clearData();
// Set the drag's format and data (use event target's id for data)
event.dataTransfer.setData("text/plain", event.target.id);
data.textContent = event.dataTransfer.getData("text/plain");
}
function dragEndHandler(event) {
if (!dropped) {
status.textContent = "Drag canceled";
}
data.textContent = event.dataTransfer.getData("text/plain") || "empty";
// Change border to signify drag is no longer in process
event.currentTarget.style.border = "1px solid black";
if (dropped) {
// Remove all event listeners
draggable.removeEventListener("dragstart", dragStartHandler);
draggable.removeEventListener("dragend", dragEndHandler);
droppable.removeEventListener("dragover", dragOverHandler);
droppable.removeEventListener("dragleave", dragLeaveHandler);
droppable.removeEventListener("drop", dropHandler);
}
}
function dragOverHandler(event) {
status.textContent = "Drop available";
event.preventDefault();
}
function dragLeaveHandler(event) {
status.textContent = "Drag in process (drop was available)";
event.preventDefault();
}
function dropHandler(event) {
dropped = true;
status.textContent = "Drop done";
event.preventDefault();
// Get data linked to event format « text »
const _data = event.dataTransfer.getData("text/plain");
const element = document.getElementById(_data);
// Append drag source element to event's target element
event.target.appendChild(element);
// Change CSS styles and displayed text
element.style.cssText = "border: 1px solid black;display: block; color: red";
element.textContent = "I'm in the Drop Zone!";
}
Spezifikationen
Specification |
---|
HTML> # dom-datatransfer-cleardata-dev> |
Browser-Kompatibilität
Loading…