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>

オーバー

をキャンセルする必要があります