HTML event attribute ondragover

The ondragover attribute event is triggered when a draggable element or text selection is being dragged over a droppable target.

To make an element draggable, mark that element with the global HTML5 draggable attribute.

Links and images are draggable by default.

Events fired on the draggable source element:

  • ondragstart - starting dragging
  • ondrag - during the dragging
  • ondragend - finish dragging

Events fired on the drop target:

  • ondragenter - when the dragged element enters the droppable target
  • ondragover - when the dragged element is over the droppable target
  • ondragleave - when the dragged element leaves the droppable target
  • ondrop - when the dragged element is dropped on the droppable target

What's new in HTML5

The ondragover attribute is new in HTML5.


<element ondragover="script or Javascript function name">

Supported Tags

ALL HTML elements

Browser compatibility

ondragover Yes 9.0 Yes Yes Yes


#droptarget {<!--  w w w.j a  v a  2  s .  c o m-->
    float: left; 
    width: 200px; 
    height: 35px;
    margin: 55px;
    margin-top: 155px;
    padding: 10px;
    border: 1px solid black;

<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me into the rectangle!</p>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function dragStart(event) {
function allowDrop(event) {

function drop(event) {
    var data = event.dataTransfer.getData("Text");;


Click to view the demo