Drop 事件未在 chrome 中触发

Posted 2023-05-08

【中文标题】Drop 事件未在 chrome 中触发

【英文标题】：Drop event not firing in chrome

【发布时间】：2014-02-15 21:00:20

【问题描述】：

似乎 drop 事件没有在我预期的时候触发。

我假设当被拖动的元素释放到目标元素上方时会触发 drop 事件，但事实并非如此。

我误会了什么？

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');
)

【问题讨论】：

重复问题：***.com/questions/19223352/jquery-ondrop-not-firing/…

潜在答案：***.com/questions/8414154/…

【参考方案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();
)

欲了解更多信息，请查看the MDN page。

【讨论】：

你不需要 ondragenter，只需要 ondragover。

仍然无法在最新的 Chromium 上运行 (Vivaldi 1.2.490.39 () (32-bit) jsfiddle.net/f282n3pt/3

使用reactjs，需要在同一个elem中添加onDragOver handler。

html5 dnd API 真的那么糟糕吗？

从 Chrome 62 开始，您确实需要 ondragenter，因为 ondragover 只会在后续鼠标移动后触发，因此您不会调用 e.preventDefault()，导致 drop 事件有时不会触发

【参考方案2】：

您只需在dragover 事件上执行event.preventDefault() 就可以逃脱惩罚。这样做会触发drop 事件。

【讨论】：

有一个未覆盖的边缘情况，您也必须在 dragenter 上调用 e.preventDefault() ，请参阅我的其他评论

【参考方案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.

【讨论】：

其实你需要做event.originalEvent.dataTransfer.dropEffect = "copy"，因为jQuery使用了自己的event

【参考方案4】：

这不是一个实际的答案，但对于像我这样缺乏一致性纪律的人来说。当 effectAllowed 不是我为 dropEffect 设置的效果时，Chrome 中的 Drop 没有为我触发。然而，它在 Safari 中对我有用。这应该设置如下：

ev.dataTransfer.effectAllowed = 'move';

或者，effectAllowed 可以设置为all，但我希望尽可能保持特异性。

对于放置效果为移动的情况：

ev.dataTransfer.dropEffect = 'move';