<!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>