Open In App

HTML | ondragover Event Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

html




<!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 content */
        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>  


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


Last Updated : 26 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads