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 will have no effect.
If this method is called with no arguments or the format is an empty string
, the data of all types will be removed.
Syntax
void dataTransfer.clearData([format]);
Parameters
- formatOptional
- A
string
representing the type of data to remove.
Returns
Void.
Example
This example shows the use of the DataTransfer
object's getData()
, setData()
and clearData()
methods.
HTML Content
<div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
CSS Content
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
JavaScript Content
function dragstart_handler(ev) { console.log("dragStart"); // Change the source element's background color to signify drag has started ev.currentTarget.style.border = "dashed"; // Set the drag's format and data. Use the event target's id for the data ev.dataTransfer.setData("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault(); } function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); // Get the data, which is the id of the drop target var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); // Clear the drag data cache (for all formats/types) ev.dataTransfer.clearData(); }
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'DataTransfer.clearData()' in that specification. |
Living Standard | |
HTML5.1 The definition of 'DataTransfer.clearData()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 3.5 (1.9.1) | 10 | 12 | 3.1 |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported | 10 | Not supported | Not supported |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
AFBarstow
Last updated by:
Sebastianz,