The DataTransfer.clearData()
method removes the drag operation's drag data
for the given type. If data for the given type does not exist, this method does nothing.
If this method is called with no arguments or the format is an empty string, the data of all types will be removed.
This method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "Files"
left in the object's DataTransfer.types
list if there are any files included in the drag.
Note: This method can only be used in the handler for the dragstart
event, because that's the only time the drag operation's data store is writable.
clearData()
clearData(format)
This example shows the use of the DataTransfer
object's getData()
, setData()
and clearData()
methods.
<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>
span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
window.addEventListener("DOMContentLoaded", () => {
const draggable = document.getElementById("source");
const droppable = document.getElementById("target");
const status = document.getElementById("status");
const data = document.getElementById("data");
let dropped = false;
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";
event.currentTarget.style.border = "1px dashed blue";
event.dataTransfer.clearData();
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";
event.currentTarget.style.border = "1px solid black";
if (dropped) {
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();
const _data = event.dataTransfer.getData("text/plain");
const element = document.getElementById(_data);
event.target.appendChild(element);
element.style.cssText =
"border: 1px solid black;display: block; color: red";
element.textContent = "I'm in the Drop Zone!";
}
});