DataTransferItemList: clear() Methode

clear()

<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>

div {
 margin: 0em;
 padding: 2em;
}
#source {
 color: blue;
 border: 1px solid black;
}
#target {
 border: 1px solid black;
}

const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (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");
});
source.addEventListener("dragend", (ev) => {
 console.log("dragEnd");
 const dataList = ev.dataTransfer.items;
 // Clear any remaining drag data
 dataList.clear();
});
target.addEventListener("drop", (ev) => {
 console.log("Drop");
 ev.preventDefault();
 // Loop through the dropped items and log their data
 for (const item of ev.dataTransfer.items) {
 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}`);
 });
 }
 }
});
target.addEventListener("dragover", (ev) => {
 console.log("dragOver");
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move";
});

Help improve MDN