drop EventListener가 작동하지 않습니다.

Question

&을 드래그하면 아무 일도 일어나지 않습니다. 그러나 "dragenter"또는 "dragleave"로 이벤트를 변경하면 같은 스크립트가 작동합니다. 내가 놓친 게 있니?

function handleDragDrop(e) { 
 
    console.log("Something droped"); 
 
    dropStatus.innerHTML = "Something droped"; 
 
} 
 

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

 

 
dropZone.addEventListener("drop", handleDragDrop);

.drop-zone { 
 
    width: 300px; 
 
    padding: 20px; 
 
    border: 2px dashed #000; 
 
}

<div id="dropZone" class="drop-zone">Drop Zone!</div> 
 
<div id="dropStatus"></div> 
 

 
<div class="" draggable="true">DRAG ME</div>

Answer 1

function handleDragDrop(e) { 
 
    console.log("Something droped"); 
 
    dropStatus.innerHTML = "Something droped"; 
 
} 
 

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

 

 
dropZone.addEventListener("drop", handleDragDrop); 
 
dropZone.addEventListener("dragover", function(e) { 
 
    e.preventDefault(); 
 
    return false; 
 
});

.drop-zone { 
 
    width: 300px; 
 
    padding: 20px; 
 
    border: 2px dashed #000; 
 
}

<div id="dropZone" class="drop-zone">Drop Zone!</div> 
 
<div id="dropStatus"></div> 
 

 
<div class="" draggable="true">DRAG ME</div>

이상이

을 취소 할 필요