Drop事件不在Chrome中触发

看来,下降事件不会触发,当我所期望的。

我认为,当被拖动的元素释放到目标元素上方时,会触发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'); }) 

为了在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页面 。

你可以在dragover事件上做一个event.preventDefault() 。 这样做会触发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.