tricks - css selector



Déclenchement par glisser-déposer dans Chrome: survoler la pseudo-classe sur les éléments environnants (2)

Pouvez-vous ajouter une classe à votre balise html / body en faisant glisser? Si oui, vous pourriez potentiellement utiliser

.is-dragging * {
  pointer-events: none;
}

où .is-dragging est la classe de votre corps / html et ensuite redéfinir sur l'élément que vous êtes en train de faire glisser.

https://src-bin.com

Je suis confronté à un comportement de glisser-déposer très frustrant et inattendu dans Chrome.

Problème:

La pseudo-classe :hover est déclenchée et bloquée sur les éléments environnants, en particulier ceux où le fantôme de DragElement se chevauche.

Étapes à suivre pour reproduire le problème:

  • Exemple: http://plnkr.co/edit/PayXodHUtxqUZsM3T2ye puis prévisualisation dans une fenêtre séparée
  • Cliquez et faites glisser l'une des cases numériques.
  • Déposez l'une des autres cases avec ses éléments fantômes qui se chevauchent légèrement.

Cela se produit dans Chrome 35, 36 et 38 bêta. J'ai également remarqué que cela ne se produit pas dans le cadre Run de Plunker avec l'éditeur, mais cela se passe dans la vue full windowed (liée ci-dessus). Cela arrive également dans mon application node-webkit (où j'ai découvert ce problème).

Ce que j'ai essayé jusqu'ici:

  • En utilisant -webkit-user-drag: element; sur .box
  • Ajout de draggable="true" attribut sur chaque élément .box pour voir s'il y a une différence.
  • event.stopPropagation sur divers éléments, y compris la window

Pourquoi cela déclencherait-il :hover sur les éléments environnants? Cela n'a absolument aucun sens. Je suis sur le point de m'arracher les cheveux! : /

Merci d'avance pour tous ceux qui veulent m'aider à résoudre ce problème.


Answer #1

Avez-vous considéré l'interface utilisateur de jQuery? Je connais le moins de ressources externes, mieux, mais l'interface utilisateur de jQuery détecte quand vous faites glisser, puis (en tant que "The Reveler"), vous pouvez ajouter une classe à un corps et spécifier

.bodyIsDragging{
   pointer-events: none
 }




draggable