web-dev-qa-db-fra.com

L'événement de dépôt HTML5 ne fonctionne pas si le transfert n'est pas géré

J'écoute l'événement drop et je fais e.preventDefault() Mais c'est pour essayer d'ouvrir le fichier déposé. Cela fonctionnait bien jusqu'à hier. Mais juste aujourd'hui, il s'est cassé pour une raison inconnue. J'ai fait un JsFiddle#bwquR/10 pour refléter le même.

Modifier:

Il semble que si vous ne prenez pas l'événement dragover, drop ne peut pas être traité. même dans le violon Si vous commentez la dragover Cela ne fonctionnera pas.
Dans le travail actuel, j’ai oublié l’orthographe de dragover, mais c’est toujours une question drop ne fonctionnera pas sans dragover

Le violon travaillait réellement mais le corps était si petit (seulement du texte DROP ici). L’événement drop n’était pris que sur cette petite zone où le texte DROP ne se trouvait pas sur tout le corps. Alors j'ai pensé que cela ne fonctionnait pas. Désolé pour la confusion.

javascripthtml5google-chromejavascript-eventsdrag-and-drop
27
Neel Basu

J'imagine que c'est parce que, sans gestionnaire d'événement dragOver, le gestionnaire d'événement par défaut de l'événement dragOver est utilisé. Ainsi, aucun événement de dépôt n'est déclenché par la suite. e.preventDefault est nécessaire pour l'événement dragOver avant l'événement drop.

35
zuo

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Si vous souhaitez autoriser une suppression, vous devez empêcher le traitement par défaut en annulant l'événement. Vous pouvez le faire en renvoyant la valeur false à partir d'un écouteur d'événement défini par un attribut ou en appelant la méthode event.preventDefault de l'événement. Ce dernier peut être plus faisable dans une fonction définie dans un script séparé.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

L'appel de la méthode preventDefault à la fois lors d'un événement dragenter et d'un événement dragover indiquera qu'un dépôt est autorisé à cet emplacement. Toutefois, vous souhaiterez généralement appeler la méthode preventDefault uniquement dans certaines situations, par exemple, uniquement si un lien est en cours de déplacement. Pour ce faire, appelez une fonction qui vérifie une condition et n'annule l'événement que lorsque la condition est remplie. Si la condition n'est pas remplie, n'annulez pas l'événement. Aucune suppression ne sera effectuée si l'utilisateur relâche le bouton de la souris.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);
4
Mike Lee

Je ne suis pas sûr de bien comprendre votre problème, mais si vous voulez lire les fichiers supprimés, vous devez gérer l'événement dragover et y mettre au moins cette ligne de code:

evt.dataTransfer.dropEffect = 'copy';

sinon, dropEffect est null par défaut et vous n'obtiendrez aucune donnée.

3
mnowotka

Fonctionne bien pour moi. Chargez-vous ceci en tant qu'URL HTTP ou FILE? Je crois que cela doit être une URL HTTP avec Chrome.

1
Maurice