L'événement Drop ne se déclenche pas dans Chrome

Il semble que l'événement drop ne se déclenche pas quand je m'y attendais.

Je suppose que l'événement drop se déclenche lorsqu'un élément qui est glissé est libéré au-dessus de l'élément cible, mais cela ne semble pas être le cas.

Qu'est-ce que je ne comprends pas?

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

Pour que l'événement drop se produise sur un élément div, vous devez annuler les événements ondragenteret ondragover. Utilisation de jquery et de votre code fourni ...

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

Pour plus d'informations, consultez la page MDN .

Vous pouvez vous en sortir simplement en faisant un event.preventDefault()sur l' dragoverévénement. Cela déclenchera l' dropévénement.

Pour que l'événement drop se déclenche, vous devez attribuer un dropEffect pendant l'événement over, sinon l'événement ondrop ne sera jamais déclenché:

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

Ce n'est pas une vraie réponse, mais pour certaines personnes comme moi qui manquent de discipline pour la cohérence. Drop ne s'est pas déclenché pour moi en chrome lorsque effectAllowedl'effet n'était pas celui que j'avais défini dropEffect. Cela a cependant fonctionné pour moi dans Safari. Cela devrait être défini comme ci-dessous:

ev.dataTransfer.effectAllowed = 'move';

Alternativement, effectAllowedpeut être défini comme all, mais je préférerais garder la spécificité là où je peux.

pour un cas où l'effet de chute est un mouvement:

ev.dataTransfer.dropEffect = 'move';