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

Answer 1

为了在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(); }) 

有关更多信息，请查看MDN页面 。

Answer 2

你可以在dragover事件上做一个event.preventDefault() 。 这样做会触发drop事件。

Answer 3

为了放下事件，您需要在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.