How to Execute a JavaScript when an element is being dragged over a drop target

It will Drag me into the rectangle.

index.html

Example: HTML

<!DOCTYPE HTML>
<html>
<head>
<style>
#droptarget {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 55px;
  margin-top: 155px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me into the rectangle!</p>

<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<p style="clear:both;" id="demo"></p>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";
  event.target.style.border = "4px dotted green";
}

function drop(event) {
  event.preventDefault();
  let data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped.";
}
</script>

</body>
</html>

Output should be:

Single Articles

Example of HTML ondragover Event Attribute	Drag Events Attribute
Definition and Usage of HTML ondragover Event Attribute	Drag Events Attribute
Browser Support of HTML ondragover Event Attribute	Drag Events Attribute
Syntax of HTML ondragover Event Attribute	Drag Events Attribute
Attribute Values of HTML ondragover Event Attribute	Drag Events Attribute
Technical Details of HTML ondragover Event Attribute	Drag Events Attribute
How to Execute a JavaScript when an element is being dragged over a drop target	Drag Events Attribute

List of Drag Events Attribute	Drag Events Attribute
HTML ondrag Event Attribute	Drag Events Attribute
HTML ondragend Event Attribute	Drag Events Attribute
HTML ondragend Event Attribute	Drag Events Attribute
HTML ondragleave Event Attribute	Drag Events Attribute
HTML ondragover Event Attribute	Drag Events Attribute
HTML ondragstart Event Attribute	Drag Events Attribute
HTML ondrop Event Attribute	Drag Events Attribute
HTML onscroll Event Attribute	Drag Events Attribute

Type:	html
Category:	Web Tutorial
Sub Category:	Drag Events Attribute
Uploaded by:	Admin