<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drag and Drop Elements in HTML</title> <script> function dragStart(e) { // Sets the operation allowed for a drag source e.dataTransfer.effectAllowed = "move"; // Sets the value and type of the dragged data e.dataTransfer.setData("Text", e.target.getAttribute("id")); } function dragOver(e) { // Prevent the browser default handling of the data e.preventDefault(); e.stopPropagation(); } function drop(e) { // Cancel this event for everyone else e.stopPropagation(); e.preventDefault(); // Retrieve the dragged data by type var data = e.dataTransfer.getData("Text"); // Append image to the drop box e.target.appendChild(document.getElementById(data)); } </script> <style> #dropBox { width: 250px; height: 250px; border: 8px dashed blue; background: lightyellow; text-align: center; margin: 21px 0; color: green; } #dropBox img { margin: 14px; } </style> </head> <body> <h2>Drag and Drop</h2> <p>Drag and drop the image into a drop box:</p> <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);"> <!--Dropped image will be inserted here--> </div> <img id="Img1" draggable="true" ondragstart="dragStart(event);" src="examples/resources/image-tree2.png" width="100" height="100" alt="sample image"/> <h1 id="dragB" draggable="true" ondragstart="dragStart(event);">Also drag me</h1> </body> </html>