Chromeでドロップイベントが発生しない

期待どおりにドロップイベントがトリガーされていないようです。

ドラッグされている要素がターゲット要素の上にリリースされると、ドロップイベントが発生すると思いますが、そうではないようです。

私は何を誤解していますか？

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

dropイベントを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ページをご覧ください。

あなただけ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';