DataTransfer: setData() Methode

setData(format, data)

<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> <button id="reset">Reset example</button>

div { margin: 0.5em 0; padding: 2em; } #target, #source { border: 1px solid black; padding: 0.5rem; } .dragging { background-color: pink; }

const source = document.querySelector("#source"); source.addEventListener("dragstart", (ev) => { console.log("dragStart"); // Change the source element's background color // to show that drag has started ev.currentTarget.classList.add("dragging"); // Clear the drag data cache (for all formats/types) ev.dataTransfer.clearData(); // Set the drag's format and data. // Use the event target's id for the data ev.dataTransfer.setData("text/plain", ev.target.id); }); source.addEventListener("dragend", (ev) => ev.target.classList.remove("dragging"), ); const target = document.querySelector("#target"); target.addEventListener("dragover", (ev) => { console.log("dragOver"); ev.preventDefault(); }); target.addEventListener("drop", (ev) => { console.log("Drop"); ev.preventDefault(); // Get the data, which is the id of the source element const data = ev.dataTransfer.getData("text"); const source = document.getElementById(data); ev.target.appendChild(source); }); const reset = document.querySelector("#reset"); reset.addEventListener("click", () => document.location.reload());