掉落事件在铬中无法触发

看起来下降事件并没有在我预期的时间触发。

我假设当被拖动的元素在目标元素上方释放时，将触发拖放事件，但情况似乎并非如此。

What am I misunderstanding?

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');
})
66562 次浏览
小开
最佳答案

为了让删除事件发生在 div 元素上，必须取消 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。

小开

你可以只对 dragover事件执行 event.preventDefault()操作，这样做会触发 drop事件。

小开

为了触发掉落事件，你需要在过度事件期间分配一个掉落效应，否则 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.
小开

This isn't an actual answer but for some people like me who lack the discipline for consistency. Drop didn't fire for me in chrome when the effectAllowed wasnt the effect I had set for dropEffect. It did however work for me in Safari. This should be set like below:

ev.dataTransfer.effectAllowed = 'move';

或者，effectAllowed可以设置为 all，但我宁愿保持特异性在我可以。

对于下降效应移动的情况:

ev.dataTransfer.dropEffect = 'move';


提交答案