2017-06-13 2 views
6

tldr; J'ai besoin d'un élément pour enregistrer glisser et déposer des événements de pointeur, mais passer des événements de clic et d'autres pointeurs aux éléments derrière lui.Evénements de pointeur CSS - Accepter Glisser, Rejeter Cliquez sur

Je suis en train de construire une fonction de téléchargement de photos par glisser-déposer en utilisant react-dropzone. Je veux que le dropzone soit sur toute la page, donc si vous faites glisser un fichier sur n'importe quelle partie de la page, vous pouvez le déposer pour télécharger l'image. Le dropzone est transparent quand aucun fichier n'est déplacé dessus, j'ai donc besoin de clics pour m'inscrire avec des éléments derrière.

Pour ce faire, je lui ai donné la composante dropzone le style suivant:

position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
pointer-events: none; 

Cependant, pointer-events: none; provoque la dropzone de ne pas reconnaître les événements glisser-déposer nécessaire. Est-il possible de reconnaître ces événements ponctuels spécifiques, tout en passant d'autres (comme le clic) aux éléments derrière le dropzone?

Répondre

0

J'ai récemment rencontré un problème similaire et j'ai réussi à le résoudre en définissant z-index pour dropzone sur 1, tout en définissant z-index pour say elements sur 2, avec position relative.