Chrome浏览器中的“Drop”事件未被触发

Question

当我期望触发拖放事件时似乎没有发生。

我认为当正在被拖动的元素释放在目标元素上时，会触发拖放事件，但事实并非如此。

我误解了什么？

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

- Mild Fuzz

---

重复问题：https://dev59.com/B2Ik5IYBdhLWcg3wfOSe#36207641 - bob

潜在答案：https://dev59.com/3moy5IYBdhLWcg3wo_no - bob

Answer 1

要在一个 div 元素上触发 drop 事件，必须取消 ondragenter 和 ondragover 事件。使用 jQuery 和提供的代码...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

获取更多信息，请访问MDN页面。

- iamchris

---

只需使用 ondragover，不需要使用 ondragenter。 - access_granted

仍然无法在最新的Chromium（Vivaldi 1.2.490.39（）（32位）上运行 http://jsfiddle.net/f282n3pt/3/ - mcsdwarken

使用ReactJS，您需要将onDragOver处理程序添加到相同的元素上。 - CHAN

HTML5的DND API真的那么糟糕吗？ - bartosz.baczek

您需要在Chrome 62中使用ondragenter，因为ondragover仅在随后的鼠标移动之后触发，因此您将不会调用e.preventDefault()，从而导致丢弃事件有时不会触发。 - zupa

Answer 2

在处理拖放事件时，你只需要在 dragover 事件上执行 event.preventDefault() 方法即可。这样做会触发 drop 事件。

- Michael Falck Wedelgård

---

如果存在未覆盖的边际情况，您必须在dragenter上调用e.preventDefault()，请参阅我的其他评论。 - zupa

Answer 3

为了触发drop事件，你需要在over事件中分配一个dropEffect，否则ondrop事件将永远不会被触发：

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

- bob

---

你需要执行event.originalEvent.dataTransfer.dropEffect = "copy"，因为jQuery使用它自己的event对象。 - AymKdn

这个解决方案对我很有效。在解决这个问题时，我认为防止dragover事件的默认行为是必要的。 - Çh Furqan Hämëèd Jūtt

Answer 4

这并不是真正的答案，但对于像我这样缺乏一致性纪律的人可能有所帮助。当 effectAllowed 不是我设置的 dropEffect 时，在 Chrome 中 Drop 对我无效。但在 Safari 中它确实有效。应该像下面这样设置：

ev.dataTransfer.effectAllowed = 'move';

或者，effectAllowed 可以设置为 all，但我更喜欢保持特定性。

当拖放效果为 move 时：

ev.dataTransfer.dropEffect = 'move';

- Shees Usman