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



Ondragleave attribute in html

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

  • The ondragleave attribute triggers when a draggable element leaves a drop target.
  • Many events triggers during the drag and drop operation.

Syntax for ondragleave attribute in HTML:

<element ondragleave="script">

Differences between HTML 4.01 and HTML5 for ondragleave attribute:

HTML 4.01

  • HTML4 does not support ondragleave attribute.

HTML 5

  • HTML5 supports ondragleave attribute.

Applies To:

Element Attribute
All HTML elements ondragleave

Attribute Values:

Value Description
script The script to be run on ondragleave

Sample Coding for ondragleave Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
          <head>
          <title>Wikitechy ondragleave 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" ondragleave="dragLeave(event)" >
    <p draggable="true" id="dragtarget">Drag me!
    </p>
    </div>
    <p id="drag">
    </p>
    <script>         
        function dragLeave(event) 
        {          
         document.getElementById("drag").innerHTML = "dragLeave Triggered";          
        }
    </script>
   
</body>
</html>

Code Explanation for ondragleave Attribute in HTML:

 ondragleave Attribute Code Explanation

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

Output for ondragleave Attribute in HTML:

ondragleave Attribute Tag Output

  1. The output shows Drag me! Text. We can drag the text.
  2. ondragleave Attribute Tag Output
  3. The dragged element leaves that original position in this situation ondragleave event triggers and the output shows “dragLeave Triggered”.

Browser Support for ondragleave Attribute in HTML:

4.0 9.0 3.5 6.0 12.0

Related Searches to ondragleave Attribute in html