<div ondrop="drop(event)"> - Javascript DOM Event

Javascript examples for DOM Event:ondrop

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

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 {/*from  w  w  w .j  a va  2 s.c  o  m*/
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #EEE;
}
</style>
</head>
<body>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondrag="dragging(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);
}

function dragging(event) {
    document.getElementById("demo").innerHTML = "The p element is being dragged";
}


function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    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