似乎在我期望的时候没有触发 drop 事件。
我假设当被拖动的元素在目标元素上方释放时会触发 drop 事件，但情况似乎并非如此。
我有什么误解？
$('.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 元素上发生 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 页面。
您只需event.preventDefault()在dragover活动上做一个就可以逃脱。这样做会触发drop事件。
为了触发 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.
这不是一个实际的答案，但对于像我这样缺乏一致性纪律的人来说。当effectAllowed我设置的效果不是我为dropEffect. 然而，它在 Safari 中对我有用。这应该设置如下：
ev.dataTransfer.effectAllowed = 'move';
或者，effectAllowed可以设置为all，但我更愿意尽可能保持特异性。
对于下落效果是移动的情况：
ev.dataTransfer.dropEffect = 'move';