Javascript 掉落事件未在chrome中触发

似乎我所期望的下降事件并没有触发

我假设当被拖动的元素释放到目标元素之上时，drop事件会触发，但情况似乎并非如此

我误解了什么

---

要在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();
})

---

有关更多信息，请查看。

您只需在

dragover

事件上执行

事件即可。preventDefault（）

。执行此操作将触发

drop

事件。

为了触发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.

---

这不是一个实际的答案，但对于像我这样缺乏一致性纪律的人来说。当

effectAllowed

不是我为

dropEffect

设置的效果时，Drop没有在chrome中为我触发。然而，在Safari中它确实对我起了作用。这应该设置如下：

ev.dataTransfer.effectAllowed='move'

或者，
effectAllowed
可以设置为
all
，但我更愿意在可能的情况下保持特定性

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

ev.dataTransfer.dropEffect='move'
您不需要ondragenter，只需要ondragover。至少在最新的Chrome上拖动图像时，仍然是不行的。在最新的Chrome上仍然不起作用（Vivaldi 1.2.490.39（）（32位）使用reactjs，您需要将onDragOver处理程序添加到同一元素。html5 dnd API真的那么糟糕吗？重复问题：潜在答案：实际上您需要执行
event.originalEvent.dataTransfer.dropEffect=“copy”
，因为jQuery使用自己的
event
，具有未覆盖的边缘大小写，因此必须调用e.preventDefault（）关于dragenter，请参见我的其他评论
$('.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.