El evento de caída no se activa en Chrome

Parece que el evento de caída no se activa cuando esperaba.

Supongo que el evento de caída se activa cuando un elemento que se está arrastrando se libera por encima del elemento de destino, pero este no parece ser el caso.

¿Qué estoy entendiendo 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 el evento de caída ocurra en un elemento div, debe cancelar los eventos ondragentery ondragover. Usando jquery y su código proporcionado ...

$('.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 obtener más información, consulte la página MDN .

Usted puede conseguir lejos con sólo hacer una event.preventDefault()en el dragoverevento. Hacer esto disparará el dropevento.

Para que se active el evento de caída, debe asignar un efecto de caída durante el evento de finalización; de lo contrario, el evento de caída nunca se activará:

$('.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 no es una respuesta real, pero para algunas personas como yo, que carecen de la disciplina para ser coherentes. La gota no se disparó para mí en cromo cuando effectAllowedel efecto no era el que me había propuesto dropEffect. Sin embargo, funcionó para mí en Safari. Esto debe establecerse como se muestra a continuación:

ev.dataTransfer.effectAllowed = 'move';

Alternativamente, effectAllowedse puede establecer como all, pero preferiría mantener la especificidad donde pueda.

para un caso en el que el efecto de caída se mueve:

ev.dataTransfer.dropEffect = 'move';