addEventListener drop 不触发

Question

我正在尝试将放置事件附加到 HTML div：

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('DROP')});

但它不火。添加用于测试目的的点击事件有效 - 此点击事件触发：

document.getElementById('sub-main').addEventListener("click", 
                                     () => {console.log('Click')});

我读过从返回 falseondragover会有所帮助：

document.getElementById('sub-main').addEventListener("ondragover", 
                                     () => {return false});

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('Drop')});

但这也不起作用。我尝试设置draggable为 true：

document.body.setAttribute('draggable', true);

但也没有运气！

将事件侦听器记录到控制台并getEventListeners() 显示所有事件，甚至是我选择的任何随机事件名称：

getEventListeners(document.getElementById('sub-main'));

但是 drop 事件仍然没有触发。有任何想法吗？

Answer 1

要启用拖动，您首先应该使用dragover事件禁用浏览器的默认行为。

添加这段代码，它将起作用。

document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

Answer 2

我在 plunker 中进行了一些尝试和错误，得出的结论是，您首先需要在文档上设置 eventListener（不要使用。getElementById('sub-main') 至少会在 plunker 中给出错误），然后在 eventlistener 中指定向哪个目标开火。为了让它检测到它可以被删除，你需要有其他事件监听器，例如：drag、dragstart、dragover、dragleave和dragenter。只需按照他们在 MDN 上所做的操作即可。