Javascript DOM ondragover Event

Introduction

Execute a JavaScript when an element is being dragged over a drop target:

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
#droptarget {/*from www  .j a  va2s. c o m*/
  float: left;
  width: 200px;
  height: 35px;
  margin: 55px;
  margin-top: 105px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p ondragstart="dragStart(event)" 
   draggable="true" 
   id="dragtarget">Drag me into the rectangle!</p>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p id="demo"></p>
<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";
  event.target.style.border = "4px dotted green";
}

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 ondragover event occurs when a draggable element or text selection is being dragged over a valid drop target.

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 ondragover event fires every 350 milliseconds.

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



PreviousNext

Related