HTML | DOM ondrop Event
The HTML DOM ondrop event occurs when a draggable element is dropped on a valid drop target.
There are some events that are used and occurred in the different stages of a drag and drop operation:
- Events fired on the draggable target:
- ondragstart: occurs when dragging of an element started.
- ondrag: occurs while an element is dragging.
- ondragend: occurs when dragging of an element finished.
- Events fired on the drop target:
- ondragenter: occurs when the dragged element entered into the drop target.
- ondragover: occurs when the dragged element is over the drop target.
- ondragleave: occurs when the dragged element leaves from the drop target.
- ondrop: occurs when the dragged element is dropped on the drop target.
Syntax:
- In HTML:
<element ondrop="myScript">
- In JavaScript:
object.ondrop = function(){myScript};
- In JavaScript, using the addEventListener() method:
object.addEventListener("drop", myScript);
Note: Links and images are draggable by default.
Example 1:
<!DOCTYPE HTML> < html > < head > < title >HTML DOM ondrop Event</ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" ondrop = "dropEle(event)" ondragover = "allowDropEle(event)" > < p ondragstart = "dragStartEle(event)" draggable = "true" id = "dragtarget" > Dragable element </ p > </ div > < div class = "droptarget" ondrop = "dropEle(event)" ondragover = "allowDropEle(event)" > </ div > < p id = "demo" ></ p > < script > function dragStartEle(event) { event.dataTransfer.setData( "Text", event.target.id); document.getElementById( "demo").innerHTML = "Dragging starts"; } function allowDropEle(event) { event.preventDefault(); } function dropEle(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; } </ script > </ center > </ body > </ html > |
Output:
Example 2:
<!DOCTYPE HTML> < html > < head > < title > HTML DOM ondrop Event </ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" > < p draggable = "true" id = "dragtarget" > Dragable element </ p > </ div > < div class = "droptarget" > </ div > < p id = "demo" ></ p > < script > // Event fired on the drag target document.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Dragging starts"; }; // Events fired on the drop target document.ondragover = function(event) { event.preventDefault(); }; document.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; }; </ script > </ center > </ body > </ html > |
Output:
Example 3:
<!DOCTYPE HTML> < html > < head > < title >HTML DOM ondrop Event</ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" > < p draggable = "true" id = "dragtarget" > Dragable element</ p > </ div > < div class = "droptarget" ></ div > < p id = "demo" ></ p > < script > // Event fired on the drag target document.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Dragging starts"; }); // Events fired on the drop target document.addEventListener("dragover", function(event) { event.preventDefault(); }); document.addEventListener("drop", function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; }); </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by HTML DOM ondrop Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Recommended Posts:
- HTML | ondrop Event Attribute
- HTML | DOM onblur Event
- HTML | DOM oncontextmenu Event
- HTML | DOM onbeforeprint Event
- HTML | DOM oncanplay Event
- HTML | DOM onclick Event
- HTML | DOM ontoggle Event
- HTML | DOM onchange Event
- HTML | DOM oncanplaythrough Event
- HTML | DOM ononline Event
- HTML | DOM onbeforeunload Event
- HTML | DOM touchend Event
- HTML | DOM onselect Event
- HTML | DOM ontimeupdate Event
- HTML | DOM onpagehide Event
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.