Execute a script when an element is being dragged over a valid drop target in HTML?

HTML Web Development Front End Technology

When an element is being dragged and dropped in HTML, the ondragover attribute fires.

Example

You can try to run the following code to implement the ondragover attribute −

<!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>

Rishi Rathor

Published on 14-Mar-2018 07:38:55

Previous Page Print Page