Javascript DOM Drag Enter Event

Description

Javascript DOM Drag Enter Event

View in separate window 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
         .drop-zone { /* www. j av a  2 s .  c o  m*/
            width: 300px; 
            padding: 20px; 
            border: 2px dashed #000; 
        } 
    </style> 
</head> 
<body> 
    <div id="dropZone" class="drop-zone">Drop Zone!</div> 
    <div id="dropStatus"></div> 

    <script> 
        function handleDragEnter(e) { 
            dropStatus.innerHTML = "You're dragging something!"; 
        } 

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

        dropZone.addEventListener("dragenter", handleDragEnter); 
    </script> 
</body> 
</html>



PreviousNext

Related