How to Execute a JavaScript when the user has finished dragging a <p> element

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)" ondragend="dragEnd(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 dragEnd(event) {
  document.getElementById("demo").innerHTML = "Finished dragging 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));
}
</script>

</body>
</html>

Output should be:

Single Articles

Example of HTML ondragend Event Attribute	Drag Events Attribute
Definition and Usage of HTML ondragend Event Attribute	Drag Events Attribute
Browser Support of HTML ondragend Event Attribute	Drag Events Attribute
Syntax of HTML ondragend Event Attribute	Drag Events Attribute
Attribute Values of HTML ondragend Event Attribute	Drag Events Attribute
Technical Details of HTML ondragend Event Attribute	Drag Events Attribute
How to Execute a JavaScript when the user has finished dragging a <p> 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