addEventListener("dragend", function(event); - Javascript DOM Event

Javascript examples for DOM Event:addEventListener

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

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 {/*ww  w. j  a v a  2s .c om*/
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="droptarget">
  <p draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget">drop here</div>

<p id="demo"></p>

<script>
document.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "Started to drag the p element.";
});

document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
});

document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

</body>
</html>

Related Tutorials