CSS per catturare cursori (trascina selezione)


170

Ho una webapp JavaScript in cui l'utente deve afferrare lo sfondo per spostare l'intero schermo. Quindi voglio che il cursore cambi quando sono in bilico sullo sfondo. I cursori CSS -moz-grabe -moz-grabbingsono ideali per questo. Certo, funzionano solo su Firefox ... ci sono cursori equivalenti per altri browser? Devo fare qualcosa di un po 'più personalizzato dei cursori CSS standard?

Risposte:


106

Penso che movesarebbe probabilmente il valore del cursore standard più vicino per quello che stai facendo:

move
Indica che qualcosa deve essere spostato.


1
Ho visto l'icona della mossa, ho pensato che l'icona della presa fosse migliore. Ma ora che hai sottolineato w3c considera che il cursore "Indica che qualcosa deve essere spostato" ha più senso. Grazie.
a.

2
@at: è possibile specificare più cursori in un elenco delimitato da virgole e l'agente utente deve utilizzare il primo che comprende. Quindi puoi usare quelli -moz * e "spostare" come fallback.
mu è troppo corto il

14
@muistooshort sei sicuro che un elenco di virgole funzioni ancora? Sto usando l' cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;ultimo preferito.
Bob Stein,

2
@ BobStein-VisiBone: penso che ci potesse essere un po 'di confusione lassù un paio d'anni fa. AFAIK l'elenco delle virgole funziona se stai specificando più formati come cursor: url(example.svg#linkcursor), url(hyper.cur), pointeranziché più valori possibili. Penso che il tuo approccio potrebbe essere necessario.
mu è troppo corto il

418

Nel caso in cui qualcun altro si imbatta in questa domanda, questo è probabilmente quello che stavi cercando:

.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;
}

44
per qualche motivo il 'grabbing' appare solo quando rilascio il mouse. qualche idea sul perché questo sia?
Jona,

@Jona la mia ipotesi è che non hai aggiunto la grabbableclasse a nessun elemento che può essere afferrato e stai attivando la classe quando vengono trascinati.
Emile Bergeron,

1
bella risposta estesa, grazie per l'aggiunta del bit "grabbing" extra. bel tocco. :)
scotself

1
Per chiunque abbia problemi con questa soluzione, ho dovuto posizionare il grabcursore :hoveranziché il semplice selettore, ovvero .grabbable:hovernell'esempio sopra.
Markus Amalthea Magnuson,

@Jona aggiungendo questi stili al genitore <ul>invece che <li>nel mio caso ha risolto il problema
Arthur Tarasov,

52

CSS3 grab e grabbingora sono ammessi valori per cursor. Al fine di fornire diversi fallback per la compatibilità tra browser 3, inclusi i file cursore personalizzati, una soluzione completa sarebbe simile alla seguente:

.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;
}

Aggiornamento 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;
}

1
Il tuo post è un duplicato di J.Steve

9
@ user2230470 È diverso in due punti importanti: in primo luogo, fornisce un'immagine del cursore per i browser che non supportano grab, ma immagini del cursore. In secondo luogo, è consigliabile disporre della sintassi standard dopo i valori prefissati dal fornitore.
Volker E.

veramente?! come mai? inoltre, dove posso trovare maggiori informazioni sulle pratiche standard affini a tali.

8
@ user2230470 - perché nei casi in cui un browser supporta 2 comportamenti in cui il prefisso potrebbe essere stato implementato leggermente prima della finalizzazione di quello standard (e quindi potrebbe agire in modo diverso) si desidera che utilizzi quello standard ... e qualunque sia la definizione ULTIMO è quello che verrà utilizzato dal browser. Pertanto quello standard dovrebbe andare per ultimo.
Jimbo Jonny,

3
è images/grab.curun URL di esempio per un'immagine che devo ospitare sul mio server Web o è qualcosa di magico di IE?
Jon z,

11

"più personalizzato" dei cursori CSS significa un plug-in di qualche tipo, ma puoi specificare totalmente i tuoi cursori usando i CSS. Penso che questo elenco abbia quello che vuoi:

.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>

Fonte: Proprietà cursore CSS @ W3Schools


5

Puoi creare i tuoi cursori e impostarli come cursore usando cursor: url('path-to-your-cursor');, oppure trovare quelli di Firefox e copiarli (bonus: un aspetto gradevole e coerente in ogni browser).


5

Potrei essere in ritardo, ma puoi provare il seguente codice, che ha funzionato per me per Drag and Drop.

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

}

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

Puoi usare le immagini qui sotto nell'URL sopra. Assicurati che sia un'immagine trasparente PNG. In caso contrario, scaricane uno da Google.

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.