Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<div id="item" draggable="true" style="width:80px;height:80px;background:steelblue;cursor:grab;color:white; display:flex;align-items:center;justify-content:center;">Drag</div> <div id="target" style="width:200px;height:120px;border:2px dashed #999;margin-top:10px; display:flex;align-items:center;justify-content:center;">Drop here</div> <script> document.getElementById("item").addEventListener("dragstart", e => e.dataTransfer.setData("text/plain", "item") ); document.getElementById("target").addEventListener("dragover", e => e.preventDefault()); document.getElementById("target").addEventListener("drop", e => { e.preventDefault(); document.getElementById("target").textContent = "Dropped! " + e.dataTransfer.getData("text/plain"); }); </script>
Result
Open