javascript chrome查看元素事件 - 丢弃事件未在chrome中触发




js事件 (4)

看来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

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

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


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


以这种方式管理事件监听器的原因很少。

如果你绑定drop,dragover,dragleave在你绑定dragenter的同时,你是否仍然看到这个问题?

你第一次看到它时,HTML dnd API是有点奇怪的。 取决于你想要做些简单的事情

onDragOver=function(e) { e.stopPropagation() }
onDrop=function(e) { /* handle drop */ }

可能是你需要的所有听众。





javascript jquery events drag-and-drop jquery-events