HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #myIDdiv{ 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="myIDdiv" ondrop="onDrop(event)" ondragover="dropArea(event)"></div> <img id="myIDimg" src="/football.svg" draggable="true" ondragstart="onDrag(event)" width="95" height="95"> <script> function dropArea(ev){ ev.preventDefault(); } function onDrag(ev){ ev.dataTransfer.setData("text", ev.target.id); } function onDrop(ev){ var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); document.getElementById("point").innerHTML="Good Job... Cheers"; } </script> </body> </html>
OUTPUT
×

Save as Private