HTML DOM ondragover Event

Last Updated : 20 Jun, 2023

The HTML DOM ondragover event occurs when a draggable element is being dragged over a valid dropzone.

Note: Links and images are draggable by default.

There are some events that are used and occurred in the different stages of a drag-and-drop operation:

ondragstart: occurs when dragging of an element started.
ondrag: occurs while an element is dragging.
ondragend: occurs when dragging of an element finished.
ondragenter: occurs when the dragged element entered into the drop target.
ondragover: occurs when the dragged element is over the drop target.
ondragleave: occurs when the dragged element leaves from the drop target.
ondrop: occurs when the dragged element is dropped on the drop target.

Note: the ondragover event fires every 350 milliseconds while dragging an element.

Syntax:

In HTML:

<element ondragover="myScript">

In JavaScript:

object.ondragover = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("dragover", myScript);

Example: Using HTML.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        HTML DOM ondragover Event
    </h2>
    <p ondragstart="dragStartEle(event)" 
       draggable="true" id="dragtarget">
        Draggable element
    </p>
    <div id="droptarget" 
         ondrop="dropEle(event)" 
         ondragover="allowDropEle(event)">
    </div>
    <p id="try"></p>

    <script>
        function dragStartEle(event) {
            event.dataTransfer.setData(
                "Text", event.target.id);
        }

        function allowDropEle(event) {
            event.preventDefault();
            document.getElementById(
                "try").innerHTML =
                "Element is over the dropzone";
            event.target.style.border = "6px dotted green";
        }

        function dropEle(event) {
            event.preventDefault();
           let data =
                event.dataTransfer.getData("Text");
            event.target.appendChild(
                document.getElementById(data));
            document.getElementById(
                "try").innerHTML = "Dragging finished";
        }
    </script>

</body>

</html>

Output:

Example: Using JavaScript

HTML

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM ondragover Event</h2>
    <p draggable="true" id="dragtarget">
        Draggable element
    </p>
    <div id="droptarget"></div>
    <p id="demo"></p>
  
    <script>
        let drag = document.getElementById(
            "dragtarget");
        let drop = document.getElementById(
            "droptarget");

        // Events fired on the drag target
        drag.ondragstart = function (event) {
            event.dataTransfer.setData(
                "Text", event.target.id);
        };

        drag.ondrag = function (event) {
            document.getElementById(
                "demo").innerHTML =
                "Dragging starts";
        };

        // Events fired on the drop target
        drop.ondragover = function (event) {
            event.preventDefault();
            document.getElementById(
                "demo").innerHTML =
                "Element is over the dropzone";
            event.target.style.border =
                "6px dotted green";
        };

        drop.ondrop = function (event) {
            event.preventDefault();
            let data =
                event.dataTransfer.getData("Text");
            event.target.appendChild(
                document.getElementById(data));
            document.getElementById(
                "demo").innerHTML = "Dragging finished";
        };
    </script>
</body>

</html>

Output:

Example: Using the addEventListener() method

HTML

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            padding: 5px;
            border: 6px solid green;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM ondragover Event</h2>
    <p draggable="true" id="dragtarget">
        Draggable element
    </p>
    <div id="droptarget"></div>
    <p id="try"></p>
  
    <script>
        let drag = document.getElementById(
            "dragtarget");
        let drop = document.getElementById(
            "droptarget");

        // Events fired on the drag target

        drag.addEventListener(
            "dragstart", function (event) {
                event.dataTransfer.setData(
                    "Text", event.target.id);
            });

        drag.addEventListener(
            "drag", function (event) {
                document.getElementById(
                    "try").innerHTML = "Dragging starts";
            });

        // Events fired on the drop target
        drop.addEventListener(
            "dragover", function (event) {
            event.preventDefault();
            document.getElementById(
                "try").innerHTML = 
              "Element is over the dropzone";
            event.target.style.border = 
              "6px dotted green";
        });

        drop.addEventListener(
            "drop", function (event) {
            event.preventDefault();
            let data = 
                event.dataTransfer.getData("Text");

            event.target.appendChild(
                document.getElementById(data));

            document.getElementById(
                "try").innerHTML = 
                 "Dragging finished";
        });
    </script>
</body>

</html>

Output:

Supported Browsers: The browsers supported by HTML DOM ondragover Event are listed below:

Google Chrome 1.0
Edge 12.0
Internet Explorer 9.0
Firefox 9.0
Apple Safari 3.1
Opera 12.0

HTML DOM ondragover Event

Vijay Sirra

Improve

Article Tags :

HTML DOM ondragover Event

Similar Reads

Thank You!

What kind of Experience do you want to share?