HTML | ondrop Event Attribute

The ondrop event attribute is used to drag an element or text and drop it into a valid dropable location or target. The drag and drop is the common feature of HTML 5.
Note: By default, the images and links are draggable.

There are different events which are used, and occur before ondrop event.

  • Events occur on the draggable target
  • Events occur on the drop target:

Events occur on the draggable target: There are three events which are used to drag an element from source location.

Event Functionality
ondragstart This event is used when the user starts to drag an element.
ondrag The ondrag event is used to dragging an element.
ondragend This event is used to finish the dragging of an element.

Events occur on the drop of the target: The list of events which are used to drop an element are given below:

Event Functionality
ondragenter This event is used to dragged an element and enter into the valid drop target.
ondragover This event is used when the dragged element is over the drop location.
ondragleave This event occurs when the dragged element leaves the drop target.
ondrop This event occurs when the dragged element is dropped on the drop target.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            HTML ondrop Event Attribute
        </title>
          
        <style>
  
            /* CSS property to create box */
            #geeks {
                width: 220px;
                height: 120px;
                padding: 15px;
                border: 3px solid #4cb96b;
            }
        </style>
          
        <script>
          
            /* script to allow drop of element */
            function allowDrop(gg) {
                gg.preventDefault();
            }
              
            /* script to drag an element */
            function drag(gg) {
                gg.dataTransfer.setData("text", gg.target.id);
            }
              
            /* script to drop an element */
            function drop(gg) {
                gg.preventDefault();
                var data = gg.dataTransfer.getData("text");
                gg.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
      
    <body>
        <p>Drop the image into the rectangle:</p>
          
        <!-- ondrop event call here -->
        <div id = "geeks" ondrop = "drop(event)" 
            ondragover = "allowDrop(event)">
        </div><br>
          
        <img id = "gfg" src
        draggable = "true" ondragstart = "drag(event)" alt = "" />
          
    </body>
</html>                                   

chevron_right


Output:
Before Dragging the element:

After drag and drop of element:

Supported Browsers: The browser supported by HTML ondrop Event Attribute are listed below:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Safari 6.0
  • Opera 12.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.