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


92

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


Réponses:


195

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 .


11
Vous n'avez pas besoin de ondragenter, seulement en déplacement.
access_granted

1
Toujours interdit, du moins lorsque vous faites glisser des images dessus sur le dernier Chrome.
NoBugs

2
Ne fonctionne toujours pas sur le dernier Chromium (Vivaldi 1.2.490.39 () (32-bit) jsfiddle.net/f282n3pt/3
mcsdwarken

2
Avec reactjs, vous devez ajouter le gestionnaire onDragOver au même élément.
CHAN

5
L'API html5 dnd est-elle vraiment SI mauvaise?
bartosz.baczek

46

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


1
qui a un cas de bord découvert, vous devez appeler e.preventDefault () sur dragenter aussi, voir mon autre commentaire
zupa

4

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.

7
En fait, vous devez le faire event.originalEvent.dataTransfer.dropEffect = "copy"car jQuery utilise le sienevent
AymKdn

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.