L'evento di rilascio non viene attivato in Chrome

Sembra che l'evento di rilascio non si stia attivando quando mi sarei aspettato.

Presumo che l'evento drop si attivi quando un elemento che viene trascinato viene rilasciato sopra l'elemento di destinazione, ma non sembra il caso.

Cosa sto fraintendendo?

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

Affinché l'evento di rilascio si verifichi su un elemento div, è necessario annullare gli eventi ondragentere ondragover. Utilizzando jquery e il codice fornito ...

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

Per ulteriori informazioni, controlla la pagina MDN .

Si può ottenere via con solo facendo una event.preventDefault()sulla dragovermanifestazione. In questo modo l' dropevento verrà attivato .

Affinché l'evento drop si attivi, è necessario assegnare un dropEffect durante l'evento over, altrimenti l'evento ondrop non verrà mai attivato:

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

Questa non è una risposta reale, ma per alcune persone come me a cui manca la disciplina per la coerenza. Drop non si è attivato per me in Chrome quando effectAllowedl'effetto non era l'effetto che avevo impostato dropEffect. Tuttavia ha funzionato per me in Safari. Questo dovrebbe essere impostato come di seguito:

ev.dataTransfer.effectAllowed = 'move';

In alternativa, effectAllowedpuò essere impostato come all, ma preferirei mantenere la specificità dove possibile.

per un caso in cui l'effetto di caduta è mossa:

ev.dataTransfer.dropEffect = 'move';