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

Javascript examples for DOM Event:addEventListener

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

Description

The ondrag event occurs when an element or text selection is being dragged.

Summary

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {//w ww  .j av a  2  s  .co m
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #EEE;
}
</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.addEventListener("drag", function(event) {
    document.getElementById("demo").innerHTML = "The p element is being dragged";
});

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));
        document.getElementById("demo").innerHTML = "The p element was dropped";
    }
});
</script>

</body>
</html>

Related Tutorials