DataTransfer: clearData() method
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.
TheDataTransfer.clearData() method removes the dragoperation'sdrag data for the given type. If data for thegiven type does not exist, this method does nothing.
If this method is called with no arguments or the format is an emptystring, the data of all types will be removed.
This method doesnot remove files from the drag operation, so it's possiblefor there still to be an entry with the type"Files" left in the object'sDataTransfer.types list if there are any files included in the drag.
Note:This method can only be used in the handler for thedragstart event,because that's the only time the drag operation's data store is writable.
Syntax
clearData()clearData(format)Parameters
formatOptionalA string which specifies the type of data to remove. Ifthis parameter is an empty string or is not provided, the data for all types isremoved.
Return value
None (undefined).
Examples
This example shows the use of theDataTransfer object'sgetData(),setData() andclearData() methods.
HTML
<span draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</span><span>Drop Zone</span><div>Status: <span>Drag to start</span></div><div>Data is: <span>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 elementsconst draggable = document.getElementById("source");const droppable = document.getElementById("target");const status = document.getElementById("status");const data = document.getElementById("data");let dropped = false;// Register event handlersdraggable.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!";}Specifications
| Specification |
|---|
| HTML # dom-datatransfer-cleardata-dev |