Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the document</title> <style> #rectId { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("Text", event.target.id); } function drop(event) { var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); event.preventDefault(); } </script> </head> <body> <div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <p id="dragId" draggable="true" ondragstart="drag(event)"> This is a draggable paragraph. Drag this item to the rectangle. </p> </body> </html>