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

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:

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

Output for ondragover Attribute in HTML:

The output shows Drag me! Text. We can drag the text.

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

PDF

Related Searches to ondragover attribute in html

ondragover jquery css dragover javascript ondragover ondragover react css dragover selector javascript dragenter dragover vs dragenter jquery bind dragover html tutorialshtml editor html code html form html tutorial html color html color codes html table html img html5 html code for website html and css html programs html website free html editor html5 tutorial wysiwyg html editor html tutorial pdf html converter php tutorial html example html tutorial css tutorial html css html tags html basics code html html online html mailto html lang html tags list