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.
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 writeable.
Syntax
DataTransfer.clearData([format]);
Parameters
format
Optional- A
string
which specifies the type of data to remove. If this parameter is an empty string or is not provided, the data for all types is removed.
Example
This example shows the use of the DataTransfer
object's getData()
, setData()
and clearData()
methods.
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
window.addEventListener('DOMContentLoaded', function () {
// Select HTML elements
var draggable = document.getElementById('source');
var dropable = document.getElementById('target');
var status = document.getElementById('status');
var data = document.getElementById('data');
var dropped = false;
// Register event handlers
draggable.addEventListener('dragstart', dragStartHandler);
draggable.addEventListener('dragend', dragEndHandler);
dropable.addEventListener('dragover', dragOverHandler);
dropable.addEventListener('dragleave', dragLeaveHandler);
dropable.addEventListener('drop', dropHandler);
function dragStartHandler (event) {
status.innerHTML = '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.innerHTML = event.dataTransfer.getData('text/plain');
}
function dragEndHandler (event) {
if (!dropped) {
status.innerHTML = 'Drag canceled';
}
data.innerHTML = 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);
dropable.removeEventListener('dragover', dragOverHandler);
dropable.removeEventListener('dragleave', dragLeaveHandler);
dropable.removeEventListener('drop', dropHandler);
}
}
function dragOverHandler (event) {
status.innerHTML = 'Drop available';
event.preventDefault();
}
function dragLeaveHandler (event) {
status.innerHTML = 'Drag in process (drop was available)';
event.preventDefault();
}
function dropHandler (event) {
dropped = true;
status.innerHTML = 'Drop done';
event.preventDefault();
// Get data linked to event format « text »
var _data = event.dataTransfer.getData('text/plain');
var 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.innerHTML = "I'm in the Drop Zone!";
}
})
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'DataTransfer.clearData()' in that specification. | Living Standard | |
HTML 5.1The definition of 'DataTransfer.clearData()' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clearData
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support Yes |
IE
? |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support Yes |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
DataTransfer.clearData() by Mozilla Contributors is licensed under CC-BY-SA 2.5.