HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #myDiv { width: 100px; height: 100px; padding:5px; border: 1px solid #8c8c8c; } </style> </head> <body> <p id="point">Drag the ball inside the Box:</p> <div id="myDiv" ondragover="onDragOver(event)"></div> <img id="myImg" src="/football.svg" draggable="true" ondragstart="onDragStart(event)" width="95" height="95"> <script> var x = document.getElementById("point"); var myDiv = document.getElementById("myDiv"); function onDragOver(e){ e.preventDefault(); } function onDragStart(e){ e.dataTransfer.setData("text", e.target.id); } myDiv.ondrop = function(e){ var data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); x.innerHTML="Good Job"; } </script> </body> </html>
OUTPUT
×

Save as Private