Open In App
Related Articles

HTML | ondragover Event Attribute

Improve Article
Save Article
Like Article

The ondragover event attribute will trigger if a draggable element or text is being dragged to a valid drop target. To drag an element garb that element and drag it to the drag point. Here we will use the global HTML 5 draggable attribute. The data and elements can’t be dropped. To allow a drop, you have to call the event.preventDefault() method. It is new in HTML 5 does not support below versions of HTML. Note: Images and link are draggable by default. Attributes:

  • Events triggers on the draggable target:
    • ondragstart: It triggers when the user begin to drag an element.
    • ondrag: It triggers when an element is being dragged.
    • ondragend: It triggers when the user is no more dragging the element.
  • Events triggers on the drop target:
    • ondragenter: This will trigger when the dragged element enters the drop target.
    • ondragover: This will trigger when the dragged element is over the drop target.
    • ondragleave: This will trigger when the dragged element leaves the drop target.
    • ondrop: This will trigger when the dragged element has been dropped on the drop target.


<element ondragover="script">

Attribute Values: It contains single value script which holds the script to be run on ondragover event. Example: 


    <title>HTML ondragover event attribute</title>
        .box {
            width: 250px;
            height: 100px;
            margin: 15px;
            padding: 5px;
            border: 2px solid black;
            color: Green;
        /* Function of start drag content */
        function dragStart(event) {
        /* Function of allow drop content */
        function allowDrop(event) {
            document.getElementById("demo").innerHTML =
                        "The element is OVER the droptarget.";
   = "3px solid green";
        /* Function of drop content */
        function drop(event) {
            var data = event.dataTransfer.getData("Text");
            document.getElementById("demo").innerHTML =
                                "The element was dropped.";
            Drag the element from top box
            and drop at bottom box
        <div class="box">
            <h1 ondragstart="dragStart(event)"
                    draggable="true" id="dragtarget">
        <div class="box" ondrop="drop(event)"
        <p style="clear:both;"></p>
        <p id="demo"></p>


  • Before dragging the element:
  • After dropping the element:

Supported Browsers: The browser supported by ondragover event attribute are listed below:

  • Google Chrome 4.0
  • Internet Explorer/ Edge 9.0
  • Firefox 3.5
  • Opera 12.0
  • Safari 6.0

Last Updated : 26 May, 2022
Like Article
Save Article
Similar Reads
Related Tutorials