Javascript DOM Drag Over Event Dropping Objects on a Target

Description

Javascript DOM Drag Over Event Dropping Objects on a Target

View in separate window 

  <!DOCTYPE html> 
  <html lang="en"> 
  <head> 
      <style> 
           .box { //from  w w  w  .j a va 2  s .c o m
              width: 100px; 
              height: 100px; 
          } 

           .red { 
              background-color: red; 
          } 

           .drop-zone { 
              width: 300px; 
              padding: 20px; 
              border: 2px dashed #000; 
          } 
      </style> 
  </head> 
  <body> 
      <div draggable="true" class="box red"></div> 
    <div id="dropZone" class="drop-zone">Drop Zone!</div> 
    <div id="dropStatus"></div> 

    <script> 
        function dragDropHandler(e) { 
            e.preventDefault(); 

            if (e.type == "dragover") { 
                dropStatus.innerHTML = "You're dragging over the drop zone!"; 
            } else { 
                dropStatus.innerHTML = "You dropped something!"; 
            } 
        } 

        let dropZone = document.getElementById("dropZone"); 
        let dropStatus = document.getElementById("dropStatus"); 

        dropZone.addEventListener("dragover", dragDropHandler); 
        dropZone.addEventListener("drop", dragDropHandler); 
    </script> 
</body> 
</html>



PreviousNext

Related