HTML DOM ondrop Event

Last Updated : 21 Jun, 2023

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: In this example, we will use DOM ondrop Event

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();
               let data =
                    event.dataTransfer.getData("Text");

                event.target.appendChild(
                    document.getElementById(data));

                document.getElementById("demo").innerHTML =
                    "Element dropped";
            }
        </script>
    </center>
</body>
</html>

Output:

Example 2: In this example, we will use DOM ondrop Event

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();
                let data = 
                    event.dataTransfer.getData("Text");
                event.target.appendChild(
                    document.getElementById(data));
                document.getElementById("demo")
                    .innerHTML = "Element dropped";
            };
        </script>
    </center>
</body>
</html>

Output:

Example 3: Using addeventlistener

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();
               let 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

HTML DOM ondragover Event

Vijay Sirra

Improve

Article Tags :

HTML DOM ondrop Event

Similar Reads

Thank You!

What kind of Experience do you want to share?