HTML | ondragover Event Attribute

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.

Syntax:



<element ondragover="script">

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • 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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.