Skip to content
Related Articles

Related Articles

HTML | DOM ondragover Event

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Aug, 2022
View Discussion
Improve Article
Save Article

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>
    <center>
        <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();
                var data =
                    event.dataTransfer.getData("Text");
               
                event.target.appendChild(
                  document.getElementById(data));
               
                document.getElementById(
                  "try").innerHTML = "Dragging finished";
            }
        </script>
    </center>
</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>
    <center>
        <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>
            var drag = document.getElementById(
              "dragtarget");
            var 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();
                var data =
                    event.dataTransfer.getData("Text");
                event.target.appendChild(
                  document.getElementById(data));
                document.getElementById(
                  "demo").innerHTML = "Dragging finished";
            };
        </script>
    </center>
</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>
    <center>
        <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>
            var drag = document.getElementById(
              "dragtarget");
            var 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();
                var data = event.dataTransfer.getData("Text");
               
                event.target.appendChild(
                  document.getElementById(data));
               
                document.getElementById(
                  "try").innerHTML = "Dragging finished";
            });
        </script>
    </center>
</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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!