Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM ondragend Event

  • Last Updated : 08 Aug, 2021

The HTML DOM ondragend event occurs when a draggable element finishes dragging.
There are some events that are used and occurred in the different stages of a drag and drop operation: 
 

  • ondragstart: occurs when dragging of an element started.
  • ondrag: occurs while an element is dragging.
  • ondragend: occurs when dragging of an element finished.

 

  • 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.

Supported Tags: It supports all HTML elements. 

Syntax: 
In HTML: 
 

<element ondragend="myScript">

In JavaScript: 
 

object.ondragend = function(){myScript};

In JavaScript, using the addEventListener() method: 
 

object.addEventListener("dragend", myScript);

Example: Using HTML 
 

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="Eledrop(event)"
             ondragover="EleallowDrop(event)">
           
            <p ondragstart="EledragStart(event)"
               ondragend="EledragEnd(event)"
               draggable="true"
               id="dragtarget">
              Draggable element
          </p>
 
        </div>
 
        <div class="droptarget"
             ondrop="Eledrop(event)"
             ondragover="EleallowDrop(event)">
      </div>
 
        <p id="demo"></p>
 
 
        <script>
            function EledragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            }
 
            function EledragEnd(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            }
 
            function EleallowDrop(event) {
                event.preventDefault();
            }
 
            function Eledrop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
  </center>
</body>
 
</html>

Output 
 

Example: Using JavaScript 
 

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>
            // Events fired on the drag target
            document.ondragstart = function(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            };
 
            document.ondragend = function(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            };
 
            // Events fired on the drop target
            document.ondragover = function(event) {
                event.preventDefault();
            };
 
            document.ondrop = function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            };
        </script>
    </center>
</body>
 
</html>

Output 
 

Example: 
 

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>
            // Events fired on the drag target
            document.addEventListener("dragstart", function(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            });
 
            document.addEventListener("dragend", function(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            });
 
            // Events fired on the drop target
            document.addEventListener("dragover", function(event) {
                event.preventDefault();
            });
 
            document.addEventListener("drop", function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            });
        </script>
    </center>
</body>
 
</html>

Output 
 

Supported Browsers: The browsers supported by HTML DOM ondragend Event are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!