CSS pour saisir les curseurs (glisser-déposer)

170

J'ai une application Web JavaScript où l'utilisateur doit saisir l'arrière-plan pour déplacer tout l'écran. Je veux donc que le curseur change lorsqu'il survole l'arrière-plan. Les curseurs -moz-grabet -moz-grabbingCSS sont idéaux pour cela. Bien sûr, ils ne fonctionnent que dans Firefox ... existe-t-il des curseurs équivalents pour les autres navigateurs? Dois-je faire quelque chose d'un peu plus personnalisé que les curseurs CSS standard?

à.
la source

Réponses:

106

Je pense que ce moveserait probablement la valeur de curseur standard la plus proche pour ce que vous faites:

move
Indique que quelque chose doit être déplacé.

mu est trop court
la source
1
J'ai vu l'icône de déplacement, j'ai pensé que l'icône de saisie était meilleure. Mais maintenant que vous avez indiqué que le w3c considère que le curseur «indique que quelque chose doit être déplacé», c'est ce qui a le plus de sens. Merci.
à.
2
@at: vous pouvez spécifier plusieurs curseurs dans une liste délimitée par des virgules et l'agent utilisateur doit utiliser le premier qu'il comprend. Vous pouvez donc utiliser les -moz * et "move" comme solution de secours.
mu est trop court
14
@muistooshort êtes-vous sûr qu'une liste de virgules fonctionne toujours? J'utilise cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;avec le dernier préféré.
Bob Stein
2
@ BobStein-VisiBone: Je pense qu'il aurait pu y avoir une certaine confusion il y a quelques années. AFAIK la liste de virgules fonctionne si vous spécifiez plusieurs formats comme cursor: url(example.svg#linkcursor), url(hyper.cur), pointerplutôt que plusieurs valeurs possibles. Je pense que votre approche pourrait être nécessaire.
mu est trop court
418

Au cas où quelqu'un d'autre tomberait sur cette question, c'est probablement ce que vous recherchiez:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
J.Steve
la source
44
pour une raison quelconque, la «saisie» n'apparaît que lorsque je relâche la souris. une idée pourquoi c'est?
Jona
@Jona, je suppose que vous n'avez ajouté la grabbableclasse à aucun élément qui peut être récupéré, et que vous basculez la classe lorsqu'ils sont déplacés.
Emile Bergeron
1
belle réponse étendue, merci d'avoir ajouté le bit supplémentaire "saisissant". belle touche. :)
scotself
1
Pour toute personne ayant des problèmes avec cette solution, j'ai dû mettre le grabcurseur sur :hoverplutôt que le sélecteur simple, c'est- .grabbable:hoverà- dire dans l'exemple ci-dessus.
Markus Amalthea Magnuson
@Jona ajoutant ces styles au parent <ul>au lieu de <li>dans mon cas a résolu le problème
Arthur Tarasov
52

CSS3 grab et grabbingsont désormais des valeurs autorisées pour cursor. Afin de fournir plusieurs solutions de secours pour la compatibilité entre navigateurs 3, y compris des fichiers de curseur personnalisés, une solution complète ressemblerait à ceci:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

Mise à jour du 07/10/2019:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
    cursor: grab; /* W3C standards syntax, all modern browser */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: grabbing;
}
Volker E.
la source
1
Votre message est un double de J.Steve's
9
@ user2230470 Il est différent sur deux points importants: Premièrement, il fournit une image de curseur pour les navigateurs qui ne prennent pas en charge grab, mais les images de curseur. Deuxièmement, il est recommandé d'avoir une syntaxe de normes après les valeurs préfixées par le fournisseur.
Volker E.
vraiment?! comment venir? aussi, où puis-je trouver plus d'informations sur les pratiques standard similaires à celles-ci.
8
@ user2230470 - parce que dans les cas où un navigateur prend en charge 2 comportements où le préfixé peut avoir été implémenté légèrement avant la finalisation du standard (et peut donc agir différemment), vous voulez qu'il utilise le standard ... et quelle que soit la définition qui vient LAST est celui que le navigateur utilisera. Par conséquent, la norme devrait aller en dernier.
Jimbo Jonny
3
est images/grab.curun exemple d'URL pour une image que je dois héberger sur mon serveur Web, ou est-ce quelque chose de magique IE?
Jon z
11

"plus personnalisé" que les curseurs CSS signifie un plugin d'un certain type, mais vous pouvez totalement spécifier vos propres curseurs en utilisant CSS. Je pense que cette liste a ce que vous voulez:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>

<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>

Source: Propriété du curseur CSS @ W3Schools

Sentier Winfield
la source
5

Vous pouvez créer vos propres curseurs et les définir comme curseur à l'aide de cursor: url('path-to-your-cursor');, ou trouver ceux de Firefox et les copier (bonus: une belle apparence cohérente dans chaque navigateur).

Ry-
la source
5

Je suis peut-être en retard, mais vous pouvez essayer le code suivant, qui a fonctionné pour moi pour le glisser-déposer.

.dndclass{
    cursor: url('../images/grab1.png'), auto; 

}

.dndclass:active {
    cursor: url('../images/grabbing1.png'), auto;
}

Vous pouvez utiliser les images ci-dessous dans l'URL ci-dessus. Assurez-vous qu'il s'agit d'une image transparente au format PNG. Sinon, téléchargez-en un sur google.

entrez la description de l'image ici entrez la description de l'image ici

Jeeva
la source