CSS para agarrar cursores (arrastrar y soltar)


170

Tengo una aplicación web JavaScript donde el usuario necesita tomar el fondo para mover toda la pantalla. Entonces, quiero que el cursor cambie cuando se ciernen sobre el fondo. Los cursores -moz-graby -moz-grabbingCSS son ideales para esto. Por supuesto, solo funcionan en Firefox ... ¿hay cursores equivalentes para otros navegadores? ¿Tengo que hacer algo un poco más personalizado que los cursores CSS estándar?

Respuestas:


106

Creo moveque probablemente sería el valor del cursor estándar más cercano para lo que estás haciendo:

mover
Indica que algo se debe mover.


1
Vi el icono de movimiento, pensé que el icono de captura era mejor. Pero ahora que señaló w3c considera que el cursor "Indica que algo se debe mover", tiene más sentido. Gracias.
a las.

2
@at: puede especificar varios cursores en una lista delimitada por comas y el agente de usuario debe usar el primero que entienda. Por lo tanto, puede usar los -moz * y "mover" como alternativa.
mu es demasiado corto el

14
@muistooshort ¿estás seguro de que una lista de comas todavía funciona? Estoy usando el cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;último preferido.
Bob Stein

2
@ BobStein-VisiBone: Creo que podría haber habido cierta confusión allí hace un par de años. AFAIK la lista de comas funciona si está especificando múltiples formatos como en cursor: url(example.svg#linkcursor), url(hyper.cur), pointerlugar de múltiples valores posibles. Creo que tu enfoque puede ser necesario.
mu es demasiado corto el

418

En caso de que alguien más se encuentre con esta pregunta, esto es probablemente lo que estaba buscando:

.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
por alguna razón, el "agarre" solo aparece cuando suelto el mouse. alguna idea de por qué es esto?
Jona

@ Jonás, supongo que no agregaste la grabbableclase a ningún elemento que se pueda agarrar, y estás alternando la clase cuando se arrastran.
Emile Bergeron

1
buena respuesta extendida, gracias por agregar el bit extra de "agarre". buen toque. :)
scotself

1
Para cualquiera que tenga problemas con esta solución, tuve que establecer el grabcursor en :hoverlugar del selector simple, es decir, .grabbable:hoveren el ejemplo anterior.
Markus Amalthea Magnuson

@Jona agregando estos estilos al padre en <ul>lugar de <li>en mi caso resolvió el problema
Arthur Tarasov

52

CSS3 grab y grabbingahora son valores permitidos para cursor. Para proporcionar varios fallos para la compatibilidad entre navegadores 3, incluidos los archivos de cursor personalizados, una solución completa se vería así:

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

Actualización 2019-10-07:

.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
Tu publicación es un duplicado de J.Steve's

9
@ user2230470 Es diferente en dos puntos importantes: Primero, proporciona una imagen de cursor para los navegadores que no son compatibles grab, sino imágenes de cursor. En segundo lugar, se recomienda tener una sintaxis estándar después de los valores prefijados del proveedor.
Volker E.

¡¿De Verdad?! ¿Cómo? Además, ¿dónde puedo encontrar más información sobre las prácticas estándar similares a tales?

8
@ user2230470 - porque en los casos en que un navegador admite 2 comportamientos en los que el prefijo puede haberse implementado un poco antes de la finalización del estándar (y, por lo tanto, puede actuar de manera diferente), desea que use el estándar ... y cualquier definición que venga ÚLTIMO es el que usará el navegador. Por lo tanto, el estándar debería ser el último.
Jimbo Jonny

3
es images/grab.cur una URL de ejemplo para una imagen que necesito alojar en mi servidor web, o es algo mágico de IE?
Jon z

11

"más personalizado" que los cursores CSS significa un complemento de algún tipo, pero puede especificar totalmente sus propios cursores usando CSS. Creo que esta lista tiene lo que quieres:

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

Fuente: cursor CSS Propiedad @ W3Schools


5

Puede crear sus propios cursores y configurarlos como el cursor usando cursor: url('path-to-your-cursor');, o encontrar los de Firefox y copiarlos (bonificación: un aspecto agradable y consistente en cada navegador).


5

Puedo llegar tarde, pero puedes probar el siguiente código, que me funcionó para arrastrar y soltar.

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

}

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

Puede usar las imágenes a continuación en la URL de arriba. Asegúrese de que sea una imagen transparente PNG. Si no, descargue uno de google.

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.