Horje
HTML ondragend Event Attribute
The ondragend event attribute in HTML is a global event attribute that fires when a user has finished dragging an element or a text selection. It is part of the HTML5 Drag and Drop API, which enables the creation of interactive drag-and-drop functionalities within web applications.
 

Example of HTML ondragend Event Attribute

It will Execute a JavaScript when the user has finished dragging a <p> element.
index.html
Example: HTML
 <p draggable="true" ondragend="myFunction(event)">Drag me!</p> 

Output should be:

Example of HTML ondragend Event Attribute

Definition and Usage of HTML ondragend Event Attribute

The ondragend attribute fires when the user has finished dragging an element or text selection.

Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, see our HTML Tutorial on HTML5 Drag and Drop.

Note: To make an element draggable, use the global HTML5 draggable attribute.

Tip: Links and images are draggable by default, and do not need the draggable attribute.

There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:


Browser Support of HTML ondragend Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Browser Support of HTML ondragend Event Attribute

Syntax of HTML ondragend Event Attribute

<element ondragend="script">

Attribute Values of HTML ondragend Event Attribute

Value Description
script The script to be run on ondragend

Technical Details of HTML ondragend Event Attribute

Supported HTML tags: ALL HTML elements

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:

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




html browsers support

Related Articles
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

Single Articles
Example of HTML ondragend Event AttributeDrag Events Attribute
Definition and Usage of HTML ondragend Event AttributeDrag Events Attribute
Browser Support of HTML ondragend Event AttributeDrag Events Attribute
Syntax of HTML ondragend Event AttributeDrag Events Attribute
Attribute Values of HTML ondragend Event AttributeDrag Events Attribute
Technical Details of HTML ondragend Event AttributeDrag Events Attribute
How to Execute a JavaScript when the user has finished dragging a <p> elementDrag Events Attribute

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


Reffered: https://www.w3schools.com/tags/ev_ondragend.asp