How to Execute a JavaScript when a draggable element enters a drop target

It will Drag the p element back and forth between the two rectangles.

index.html

Example: HTML

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  margin-right: 100px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" 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 dragEnter(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
    document.getElementById("demo").innerHTML = "Entered the dropzone";
  }
}

function dragLeave(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
    document.getElementById("demo").innerHTML = "Left the dropzone";
  }
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  let data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

Output should be:

Single Articles

Example of HTML ondragenter Event Attribute	Drag Events Attribute
Definition and Usage of HTML ondragenter Event Attribute	Drag Events Attribute
Browser Support of HTML ondragenter Event Attribute	Drag Events Attribute
Syntax of HTML ondragenter Event Attribute	Drag Events Attribute
Attribute Values of HTML ondragenter Event Attribute	Drag Events Attribute
Technical Details of HTML ondragenter Event Attribute	Drag Events Attribute
How to Execute a JavaScript when a draggable element enters 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