Skip to content
Related Articles

Related Articles

HTML | ondragover Event Attribute
  • Last Updated : 12 Jul, 2019

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:




<!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>   

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
Recommended Articles
Page :