<!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)" ondragover="onDragOver(event)"></div>
<img id="myImg" src="/football.svg" draggable="true" ondrag="onDrag()" ondragstart="onDragStart(event)" width="95" height="95">
<script>
var x = document.getElementById("point");
var myImg = document.getElementById("myImg");
function onDragOver(e) {
e.preventDefault();
}
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";
}
function onDrag(){
x.innerHTML= "You are dragging..."
}
function onDragEnd(){
alert("You finished dragging");
}
myImg.ondragend = onDragEnd;
</script> </body>
</html>