Maison >interface Web >tutoriel CSS >Comment implémenter des curseurs CSS multi-navigateurs pour le glisser-déposer ?

Comment implémenter des curseurs CSS multi-navigateurs pour le glisser-déposer ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-06 03:11:02260parcourir

How to Implement Cross-Browser CSS Cursors for Drag and Drop?

Curseurs CSS multi-navigateurs pour glisser-déposer

Pour améliorer l'expérience utilisateur dans une application Web JavaScript où l'arrière-plan doit être récupéré pour déplacer tout l'écran, il est indispensable de changer le curseur pour indiquer l'action de saisie. Bien que les curseurs CSS -moz-grab et -moz-grabbing conviennent à Firefox, leur prise en charge dans d'autres navigateurs est limitée.

Solution multi-navigateurs

Heureusement, il existe des curseurs équivalents pour d'autres navigateurs :

<code class="css">.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}</code>

Ce code applique un curseur "déplacer" comme solution de secours si le curseur "attraper" n'est pas pris en charge, suivi de curseurs spécifiques au fournisseur pour Firefox (-moz -grab) et les navigateurs WebKit (-webkit-grab).

Grab vs. Grabbing

Pour fournir un retour visuel plus dynamique pendant l'opération de glisser, vous pouvez éventuellement appliquer un curseur « main fermée » :

<code class="css">.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}</code>

Ce code change le curseur en « saisissant » lorsque l'utilisateur saisit activement l'arrière-plan, indiquant que l'écran est en cours de déplacement.

Par en implémentant ces curseurs CSS, vous pouvez créer une expérience de glisser-déposer cohérente et intuitive sur différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn