web-dev-qa-db-fra.com

Pourquoi le glisser-déposer HTML5 ne fonctionne-t-il pas dans Firefox?

J'ai lié des événements à différents éléments, et lorsque 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 ne se déclenche. Que se passe-t-il?

html5drag-and-drop
34
RandallB

Je n'utilise pas jQuery, j'ai donc supprimé la partie originalEvent et changé le format en texte (ou IE a eu un problème), et cela fonctionne:

event.dataTransfer.setData('text', 'anything');

Dans l'événement drop, assurez-vous d'appeler:

event.preventDefault();

Ou il passera à n'importe quoi.com.

30
Carson Holmes

Firefox requiert qu'un utilisateur exécute le dataTransfer.setData fonction dans l'événement.

Pour vous jQuery utilisateurs, 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 désormais correctement comme prévu. Évidemment, vous pouvez remplacer les arguments setData par des données plus utiles.

32
RandallB

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 automatique ou sur défilement.

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=33929

qui est de définir -moz-user-select: aucun

sur l'élément faisant défiler en train d'être glissé. Cela a résolu mon problème particulier.

6
user3795410

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 .

2
Akhilesh Sehgal