O evento de descarte não dispara no cromo

Parece que o evento drop não está sendo acionado quando eu esperava.

Presumo que o evento de soltar é acionado quando um elemento que está sendo arrastado é liberado acima do elemento de destino, mas não parece ser o caso.

O que estou entendendo mal?

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

Para que o evento drop ocorra em um elemento div, você deve cancelar os eventos ondragentere ondragover. Usando jquery e seu código fornecido ...

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

Para obter mais informações, verifique a página MDN .

Você pode se safar apenas fazendo um comentário event.preventDefault()sobre o dragoverevento. Isso irá disparar o dropevento.

Para que o evento drop seja disparado, você precisa atribuir um dropEffect durante o evento over, caso contrário, o evento ondrop nunca será disparado:

$('.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.

Esta não é uma resposta real, mas para algumas pessoas como eu, que não têm disciplina para consistência. A gota não disparou para mim em cromo quando effectAllowedo efeito que eu não tinha planejado não era o mesmo dropEffect. No entanto, funcionou para mim no Safari. Isso deve ser definido como abaixo:

ev.dataTransfer.effectAllowed = 'move';

Alternativamente, effectAllowedpode ser definido comoall , mas prefiro manter a especificidade onde puder.

para um caso em que o efeito de queda é movido:

ev.dataTransfer.dropEffect = 'move';