web-dev-qa-db-fra.com

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

J'ai une application Web JavaScript où l'utilisateur doit saisir l'arrière-plan pour déplacer tout l'écran. Donc, je veux que le curseur change quand ils survolent l'arrière-plan. Les curseurs CSS -moz-grab et -moz-grabbing sont parfaits 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?

csscss3cursor
130
at.

Je pense que move serait probablement la plus proche valeur du curseur standard pour ce que vous faites:

bouge toi
Indique que quelque chose doit être déplacé.

79
mu is too short

Au cas où quelqu'un tomberait sur cette question, voici 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;
}
340
J.Steve

CSS3grab et grabbing sont maintenant les valeurs autorisées pour cursor. Afin de fournir plusieurs solutions de remplacement pour la compatibilité entre navigateurs y compris les 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;
}
37
Volker E.

"plus personnalisé" que les curseurs CSS désigne un plugin d'un certain type, mais vous pouvez totalement spécifier vos propres curseurs à l'aide de 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é de curseur CSS @ W3Schools

10
Winfield Trail

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: un look cohérent agréable dans tous les navigateurs).

5
Ry-

Je peux être en retard, mais vous pouvez essayer le code suivant, qui a fonctionné pour moi pour Drag and Drop.

.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 PNG transparente. Sinon, téléchargez-en un sur Google.

 enter image description here  enter image description here

3
Jeeva

Le curseur de la main fermée n'est pas 16x16. Si vous en avez besoin dans les mêmes dimensions, vous les avez tous les deux en 16x16 px

 opened hand  closed hand

Ou si vous avez besoin de curseurs originaux:

https://www.google.com/intl/en_ALL/mapfiles/openhand.curhttps://www.google.com/intl/en_ALL/mapfiles/closedhand.cur

0
Zenon