HTML | ondrop Event Attribute
The ondrop event attribute is used to drag an element or text and drop it into a valid droppable 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:
Supported Tags: It supports all HTML tags.
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:
HTML
<!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> |
Output:
Before Dragging the element:
Supported Browsers: The browser supported by HTML ondrop Event Attribute are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 9.0
- Safari 3.1
- Opera 12.0
Please Login to comment...