DataTransferItemList: remove() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
The DataTransferItemList.remove() method removes the
DataTransferItem at the specified index from the list. If the index is
less than zero or greater than one less than the length of the list, the list will not
be changed.
Syntax
js
remove(index)
Parameters
index-
The zero-based index number of the item in the drag data list to remove. If the
indexdoesn't correspond to an existing item in the list, the list is left unchanged.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMException-
Thrown if the drag data store is not in read/write mode and so the item cannot be removed.
Examples
Dragging and dropping an element
This example shows the use of the remove() method.
HTML
html
<div>
<p id="source" 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">Drop Zone</div>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
js
function dragstartHandler(ev) {
console.log("dragStart");
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// Add some other items to the drag payload
dataList.add("<p>Paragraph…</p>", "text/html");
dataList.add("http://www.example.org", "text/uri-list");
}
function dropHandler(ev) {
console.log("Drop");
ev.preventDefault();
const data = event.dataTransfer.items;
// Loop through the dropped items and log their data
for (const item of data) {
if (item.kind === "string" && item.type.match("^text/plain")) {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match("^text/html")) {
// Drag data item is HTML
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match("^text/uri-list")) {
// Drag data item is URI
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
}
function dragoverHandler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
}
function dragendHandler(ev) {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
// Clear all the files. Iterate in reverse order to safely remove.
for (let i = dataList.length - 1; i >= 0; i--) {
if (dataList[i].kind === "file") {
dataList.remove(i);
}
}
// Clear any remaining drag data
dataList.clear();
}
const source = document.querySelector("#source");
source.addEventListener("dragstart", dragstartHandler);
source.addEventListener("dragend", dragendHandler);
const target = document.querySelector("#target");
target.addEventListener("drop", dropHandler);
target.addEventListener("dragover", dragoverHandler);
Result
Specifications
| Specification |
|---|
| HTML # dom-datatransferitemlist-remove-dev |
Browser compatibility
Loading…