html tutorial - ondragover Attribute in HTML - html5 - html code - html form



Ondragover attribute in html

Learn html - html tutorial - Ondragover attribute in html - html examples - html programs

  • The ondragover attribute triggers when a draggable element being dragged over a drop target.
  • Many events triggers during the drag and drop operation.
  • Syntax for ondragover attribute in HTML:

    <element ondragover="script">

    Difference between HTML 4.01 and HTML 5 for ondragover Attribute:

    HTML 4.01

    • HTML 4 does not support ondragover attribute.

    HTML 5

    • HTML 5 supports ondragover attribute.

    Applies To:

    Element Attribute
    All HTML elements ondragover

    ondragover Attribute Values:

    Value Description
    script The script to be run on ondragover

    Sample Coding for ondragover Attribute in HTML:

    Tryit<!DOCTYPE html>
    <html>
        <head>
            <title>Wikitechy ondragover attribute</title>
            <style>
                 .drag_div {
                   width: 100px;
                   height: 35px;            
                   padding: 10px;
                   border: 1px solid #ff0000;
                 }
            </style>
        </head>
        <body>
            <p>Drag the element: </p>
            <div class="drag_div" ondragover="dragOver(event)">
                <p draggable="true" id="dragtarget">Drag me!</p>
            </div>
            <p id="drag"></p>
            <script>
              function dragOver(event)
              { 
                document.getElementById("drag").innerHTML = "dragOver Triggered";          
              }
            </script>
        </body>
    </html>

    Code Explanation for ondragover Attribute in HTML:

    ondragover Attribute Code Explanation

    1. CSS design for the div element it looks like a red box.
    2. ondragover attribute used to trigger on the draggable element being dragged.
    3. ondragover attribute value “dragOver” used to call JavaScript function when the event occurs.
    4. <p> tag has draggable attribute true so it can be dragged.
    5. dragOver JavaScript function defined in <script> tag.
    6. The function change innerHTML of <p> tag which has id “drag” as “dragOver triggered”.

    Output for ondragover Attribute in HTML:

    ondragover Attribute Output

    1. The output shows Drag me! Text. We can drag the text.
    2. ondragover Attribute Output
    3. The element being dragged, so the event triggers and the output shows “dragOver Triggered”.

    Browser Support for ondragover Attribute in HTML:

    4.0 9.0 3.5 6.0 12.0

    Related Searches to ondragover attribute in html