Question

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

console.log("тест");

但它没有开火。

我添加了一个点击事件来测试添加事件，此事件会触发：

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

我已经读过从document.getElementById('sub-main').addEventListener("click", () => {console.log('Click')});返回false会有所帮助：

ondragover

但这不起作用

我也尝试将document.getElementById('sub-main').addEventListener("ondragover", () => {return false}); document.getElementById('sub-main').addEventListener("drop", () => {console.log('Drop')});设置为true：

draggable

但也没有运气！

我已将事件监听器记录到控制台，如下所示：

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

它显示了所有事件（虽然我可以添加我选择的任何随机事件名称，但它会显示） - 但事件仍然不会触发

有什么想法吗？

Answer 1

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

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

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

Answer 2

我在plunker中做了一些试验和错误，并得出结论，你首先需要在文档上设置eventListener（不要使用.getElementById（'sub-main'）至少在plunker中给出错误）然后指定要触发目标的eventlistener。并且为了检测它可以被丢弃，你需要有其他的eventListeners，如：drag，dragstart，dragover，dragleave和dragenter。 Just follow what they did here on MDN.

Answer 3

正如我在评论中所说，W3Schools有这些事件的工作实例，很高兴它有所帮助。

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag_all

addEventListener drop not not firing

3 个答案: