Execute a script when the dragged element is being dropped in HTML?

HTML Web Development Front End Technology

When a text selection or draggable element is dropped onto an authorised drop target, the ondrop event is triggered. It is simpler to move an object to a different area by engaging notion of drag and drop.

Following are the examples…

Example

In the following example we are using executing a javascript when the draggable element is dropped in <div>.


<!DOCTYPE HTML>
<html>
<head>
<style>
   .droptarget {
       float: left;
       width: 100px;
       height: 35px;
       margin: 15px;
       padding: 10px;
       border: 1px solid #aaaaaa;
   }
</style>
</head>
<body>
   <div class="droptarget" ondrop="drop(event)"
      ondragover="allowDrop(event)">
      <p ondragstart="dragStart(event)" draggable="true"
      id="dragtarget">DRAG ME..!</p>
   </div>
   <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <p id="tutorial"></p>
   <script>
      function dragStart(event) {
         event.dataTransfer.setData("Text", event.target.id);
         document.getElementById("tutorial").innerHTML = "Started to drag";
      }
      function allowDrop(event) {
         event.preventDefault();
      }
      function drop(event) {
         event.preventDefault();
         var data = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(data));
         document.getElementById("tutorial").innerHTML = "The object was dropped";
      }
   </script>
</body>
</html>

Output

On executing the above script, the webpage will display a rectangle box consisting of text "drag me." When you start to drag the text, it displays the text "started to drag".

When the text gets dropped in the next rectangle, the drop event gets triggered and displays the text "the object was dropped".

Example

Another example can be written as −


<!DOCTYPE HTML>
<html>
<head>
<style>
   .drag {
      float : left;
      width : 100px;
      height : 35px;
      border : 2px dashed #876587;
      margin : 15px;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
      <p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)" draggable = "true" id="dragtarget">Drag!</p>
   </div>
   <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>
   <div id="box"></div>
   <p>Drag the left box to the right or drag the right box to the left.</p>
   <script>
      function dragStart(event) {
         event.dataTransfer.setData("Text", event.target.id);
      }
      function draggingNow(event) {
         document.getElementById("box").innerHTML = "Dragged successfully!";
      }
      function dropNow(event) {
         event.preventDefault();
      }
      function drop(event) {
         event.preventDefault();
         var data = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(data));
         document.getElementById("box").innerHTML = "The element dropped successfully!";
      }
   </script>
</body>
</html>

Output

On executing the above script, the webpage will display a rectangle box consisting of text "drag me." When you start to drag the text, it displays the text "Drag the left box to the right or drag the right box to the left."

When the text starts getting dragged, the drop event gets triggered and displays the text "the element dropped successfully".

When the text gets dropped in the next rectangle, the drop event gets triggered and displays the text "dragged successfully!".

Yaswanth Varma

Updated on: 06-Sep-2022

197 Views

Kickstart Your Career

Get certified by completing the course

Get Started