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:

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

HTML | ondragover Event Attribute

Explore