HTML | DOM ondrop Event - GeeksforGeeks

12 Dec, 2021
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: 
html
<!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">                Draggable 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: 
html
<!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">                Draggable 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: 
html
<!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">              Draggable 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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
anikaseth98
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Types of CSS (Cascading Style Sheet)
HTML | <img> align Attribute
How to position a div at the bottom of its container using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript