未在Chrome中触发Drop事件


92

似乎在我期望的时间没有触发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');
})


Answers:


195

为了使drop事件发生在div元素上,必须取消ondragenterondragover事件。使用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页面


11
您不需要ondragenter,只需ondragover。
access_granted

1
至少在将图片拖到最新的Chrome浏览器上时,还是不行。
NoBugs

2
在最新的Chromium(Vivaldi 1.2.490.39()(32位)jsfiddle.net/f282n3pt/3
mcsdwarken '16

2
使用reactjs,您需要将onDragOver处理程序添加到相同的elem中。

5
html5 dnd API真的不好吗?
bartosz.baczek

46

您可以event.preventDefault()通过参加dragover活动来摆脱困境。这样做会触发该drop事件。


1
具有未发现的边缘情况,您也必须在dragenter上调用e.preventDefault(),请参阅我的其他评论
zupa

4

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

7
实际上,您需要做的event.originalEvent.dataTransfer.dropEffect = "copy"是因为jQuery使用自己的event
AymKdn

0

这不是一个实际的答案,但是对于像我这样的缺乏一致性准则的人来说。当effectAllowed我没有达到预期的效果时,Drop并没有用chrome激发我dropEffect。但是,它确实对我在Safari中起作用。设置如下:

ev.dataTransfer.effectAllowed = 'move';

或者,effectAllowed可以将设置为all,但我希望在可能的地方保持具体性。

对于掉落效果移动的情况:

ev.dataTransfer.dropEffect = 'move';

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.