How to Execute a JavaScript when a draggable element is dropped in a <div> element

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;
  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)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="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);
  document.getElementById("demo").innerHTML = "Started to drag the p element";
}

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

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 ondrop Event Attribute	Drag Events Attribute
Definition and Usage of HTML ondrop Event Attribute	Drag Events Attribute
Browser Support of HTML ondrop Event Attribute	Drag Events Attribute
Syntax of HTML ondrop Event Attribute	Drag Events Attribute
Attribute Values of HTML ondrop Event Attribute	Drag Events Attribute
Technical Details of HTML ondrop Event Attribute	Drag Events Attribute
How to Execute a JavaScript when a draggable element is dropped in a <div> element	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