Javascript DOM ondrag Event

Introduction

Execute a JavaScript when a <p> element is being dragged.

Drag the p element back and forth between the two rectangles.

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {//  w  w w. ja v a  2 s .  co m
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</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)"></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>

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

To make an element draggable, use the global HTML5 draggable attribute.

Links and images are draggable by default, and do not need the draggable attribute.

While dragging an element, the ondrag event fires every 350 milliseconds.

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



PreviousNext

Related