<p ondragend="dragEnd(event)" > - Javascript DOM Event

Javascript examples for DOM Event:ondragend

  1. HOME
  2. Javascript
  3. DOM Event
  4. ondragend

Description

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

Summary

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {/*from   w  w  w .  java 2  s.  c  o m*/
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid red;
}
</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)">drop here</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>

Related Tutorials