Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM ondrop Event

  • Last Updated : 28 Jun, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :