Javascript DOM ondragend Event

Introduction

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

Drag the p element back and forth between the two rectangles:

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {/*from w  ww .j  a v a  2  s .c o  m*/
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<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 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();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

The ondragend event occurs when the user has finished dragging an element or text selection.

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

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

Bubbles: Yes
Cancelable: No
Event type: DragEvent
Supported HTML tags: All HTML elements



PreviousNext

Related