home
play_circle_filled
menu
cached
settings_brightness
Run
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE HTML> <html> <head> <title>HTML ondrag Attribute Example</title> <style> .container-div { height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <h2>HTML ondrag Attribute Example</h2> <p>Drag and drop the p element into the two rectangles one after the other.</p> <div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"> <p draggable="true" id="paragraphId" ondragstart="dragstart(event)">Drag me!</p> </div> <div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p id="msgId"></p> <script> //optional, skip to discard event message. function dragstart(event) { document.querySelector("#msgId").innerHTML = ""; } function allowDrop(event) { event.preventDefault(); } function drop(event) { let dragItem = document.querySelector("#paragraphId"); event.target.appendChild(dragItem); document.querySelector("#msgId").innerHTML = "The element is dropped"; } </script> </body> </html>