丢弃事件未在chrome中触发

Question

看来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');
})

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

有关更多信息,请查看MDN页面.

Answer 2

你可以event.preventDefault()在dragover活动中逍遥法外.这样做会触发drop事件.

Answer 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.