Comment arrêter la redirection après l’événement `drop`?

Après avoir déposé un fichier dans un div de Firefox, la page Web sera redirigée vers ce fichier. J’ai essayé d’arrêter cette propagation en utilisant e.preventDefault() de jQuery dans le gestionnaire de drop , et j’ai échoué.

Voir cette démo , déposer un fichier dans #test ne redirige pas la page Web, mais dans #test1 , je veux savoir pourquoi. Devrais-je toujours lier les gestionnaires à dragenter , dragover , dragleave et drop pour empêcher la propagation après le drop ?

mettre à jour:

J’ai trouvé quelques astuces sur html5doctor :

Pour indiquer au navigateur que nous pouvons déposer cet élément, il suffit d’annuler l’événement dragover. Cependant, comme IE se comporte différemment, nous devons faire la même chose pour l’événement dragenter.

Et Mozilla affirme :

Un écouteur pour les événements dragenter et dragover est utilisé pour indiquer des cibles de repository valides, c’est-à-dire des emplacements où des éléments glissés peuvent être déposés.

Mais je teste cette démo sur firefox, #test fonctionne et #test1 ne semble pas, Mozilla semble avoir commis une erreur, et html5doctor a raison: Firefox n’a dragover que de la fonctionnalité de dragover pour que drop efficace.

L’événement ondragover doit être annulé dans Google Chrome et Safari pour permettre le déclenchement de l’événement ondrop .

J’ai remarqué qu’il ne suffisait pas d’annuler onDragOver, mais je devais également annuler onDragDrop et onDragLeave. Ci-dessous, je montre la journalisation indiquant le comportement de l’utilisateur:

  

Et puis votre élément …

 

Drag something here!