Teach with us

Which event occurs in JavaScript when the dragged element is over the target?

The ondragover event triggers when the dragged element is over the drop target.

Example

You can try to run the following code to learn how to implement ondragover event in JavaScript −

Live Demo

<!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)" ondragend="dragEnd(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 dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "Dragging ends!";
         }
         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>
Updated on 23-Jun-2020 08:14:21

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements