删除事件监听器不起作用

Question

When I drag & drop the text, nothing happens. But the same script works when I change the event to "dragenter" or "dragleave". Did I miss anything?

 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

Need to cancel the over

 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>