DataTransferItemList: clear() method
The DataTransferItemList
method clear()
removes all DataTransferItem
objects from the drag data items list, leaving the list empty.
The drag data store in which this list is kept is only writable while handling the dragstart
event. While handling drop
, the drag data store is in read-only mode, and this method silently does nothing. No exception is thrown.
Syntax
Parameters
Return value
Examples
This example shows the use of the clear()
method.
HTML
<div>
<p
id="source"
ondragstart="dragstartHandler(event);"
ondragend="dragendHandler(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="dropHandler(event);"
ondragover="dragoverHandler(event);">
Drop Zone
</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
function dragstartHandler(ev) {
console.log("dragStart");
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
}
function dropHandler(ev) {
console.log("Drop");
ev.preventDefault();
for (const item of ev.dataTransfer.items) {
if (item.kind === "string" && item.type.match(/^text\/plain/)) {
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match(/^text\/html/)) {
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
}
function dragoverHandler(ev) {
console.log("dragOver");
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
function dragendHandler(ev) {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
dataList.clear();
}
Result
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
clear |
13 |
12 |
50 |
No |
12 |
6 |
4.4 |
18 |
50 |
≤14 |
6 |
1.0 |