<!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" ondrop="onDrop(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 onDragStart(e) {
e.dataTransfer.setData("text", e.target.id);
}
function onDrop(e) {
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
x.innerHTML="Good Job";
}
myDiv.ondragover = function(e){
e.preventDefault();
};
</script> </body>
</html>