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



Ondrop attribute in html

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

  • The ondrop attribute triggers when a draggable element dropped on a valid drop target.
  • Many events triggers during the drag and drop operation.

Syntax for ondrop attribute in HTML:

<element ondrop="script">

Difference between HTML 4.01 and HTML 5 for ondrop Attribute:

HTML 4.01

  • HTML 4 does not support ondrop attribute.

HTML 5

  • HTML 5 supports ondrop attribute.

Applies To:

Element Attribute
All HTML elements ondrop

ondrop Attribute Values:

Value Description
script The script to be run on ondrop

Sample Coding for ondrop Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy ondrop 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" ondrop="drop(event)" 
            ondragover ="dragOver(event)">
                <p draggable="true" ondragstart="dragStart(event)" id ="dragtarget">
                Drag me!</p>
            </div><br>
            <div class="drag_div" ondrop="drop(event)" 
            ondragover ="dragOver(event)">
            </div>
            <p id="drag"></p>
            <script>
                function dragStart(event) {
                   event.dataTransfer.setData("Text", event.target.id);
                   }
                function dragOver(event) {
                   event.preventDefault();
                   }
                function drop(event) {
                   event.preventDefault();
                   var data = event.dataTransfer.getData("Text");
                   event.target.appendChild(document.getElementById(data));
                   document.getElementById("drag").innerHTML="The element
                   was dropped";
                   }
            </script>
    </body>
</html>

Code Explanation for ondrop Attribute in HTML:

ondrop Attribute Code Explanation

  1. ondrop attribute used to trigger an event when the element dropped on a valid drop target.
  2. ondragover attribute used to trigger an event when the element dragged over the valid drop target.
  3. ondragstart attribute used to trigger an event when dragging operation starts.
  4. dragStart JavaScript function get the text of the dragged element.
  5. dragOver JavaScript function used to set the element properties as default in new drop position.
  6. drop JavaScript function used to set the element properties as default in new valid drop position.
  7. Get the text in the dropped element.
  8. Append the text to the new valid drop point.
  9. innerHTML of <p> tag which has id “drag” as “The element was dropped”.

Output for ondrop Attribute in HTML:

ondrop Attribute Output

  1. The output shows Drag me! Text. We can drag the text.
  2. ondrop Attribute Output
  3. The element being drag and dropped to the valid target the event triggers and the output shows “The element was dropped”.

Browser Support for ondrop Attribute in HTML:

4.0 9.0 3.5 6.0 12.0

Related Searches to ondrop attribute in html