Pourquoi le glisser-déposer HTML5 ne fonctionne-t-il pas dans Firefox?
J'ai lié des événements à différents éléments, et quand je les fais glisser dans tous les navigateurs, sauf Firefox, cela fonctionne comme prévu. Dans firefox, cependant, cela ne fonctionne pas du tout. Le seul événement qui se déclenche est dragstart, et aucun des autres événements de l'incendie. Ce qui se passe?
4 réponses
Je n'utilise pas jQuery, donc supprimé la partie originalEvent et changé le format en texte (ou IE avait problème), et cela fonctionne:
event.dataTransfer.setData('text', 'anything');
Dans les autres événements, assurez-vous d'appeler:
event.preventDefault();
Ou il va sauter à anything.com sur certains événements.
Firefox exige qu'un utilisateur exécute la fonction dataTransfer.setData dans l'événement.
Pour vos utilisateurs jQuery, cela signifie que le code suivant devrait résoudre votre problème:
function dragstartHandler(event){
event.originalEvent.dataTransfer.setData('text/plain', 'anything');
}
Les événements futurs sur la même traînée se déclencheront maintenant correctement comme prévu. Évidemment, vous pouvez remplacer les arguments setData par des données plus utiles.
FF a des problèmes de longue date avec la consommation de certains événements de souris qui proviennent d'éléments dont le débordement est défini sur auto ou scroll.
Dans mon cas, j'avais une bibliothèque bien utilisée pour le glisser-déposer qui fonctionnait parfaitement dans les échantillons et dans mon application sur tous les navigateurs sauf firefox. Après avoir fouillé les tickets liés à cela, j'ai trouvé une solution que je crédite entièrement à un contributeur à ce ticket https://bugzilla.mozilla.org/show_bug.cgi?id=339293
Qui est à définir - MOZ-user-select: aucun
Sur l'élément défilant en cours de déplacement. Il a résolu mon problème en particulier.
Vous pouvez l'utiliser comme référence pour cette solution de question concernant les redirections qui se produisent sur Firefox.
Vous devez empêcher l'action par défaut dans la méthode drop pour résoudre ce problème.
function drop(e) {
if(e.preventDefault) { e.preventDefault(); }
if(e.stopPropagation) { e.stopPropagation(); }
//your code here
return false;
}
J'ai obtenu cette solution de ce lien .