<script> const allowDrop = (e) => e.preventDefault(); const drag = (e) => e.dataTransfer.setData("text", e.target.id); const drop = (e) => { var data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); } </script> <div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div> <p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter