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

Javascript examples for DOM Event:addEventListener

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

Description

The ondragstart event occurs when the user starts to drag an element or text selection.

Summary

Bubbles Yes
Cancelable Yes
Supported HTML tags: All HTML elements

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {/*from w ww.j av  a 2s .  c o  m*/
    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"></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