CSS para capturar cursores (arrastar e soltar)

170

Eu tenho um webapp JavaScript em que o usuário precisa capturar o plano de fundo para mover a tela inteira. Então, eu quero que o cursor mude quando eles estão pairando sobre o fundo. Os cursores -moz-grabe -moz-grabbingCSS são ideais para isso. Claro, eles só funcionam no Firefox ... existem cursores equivalentes para outros navegadores? Preciso fazer algo um pouco mais personalizado que os cursores CSS padrão?

às.
fonte

Respostas:

106

Eu acho moveque provavelmente seria o valor do cursor padrão mais próximo do que você está fazendo:

mover
Indica que algo deve ser movido.

mu é muito curto
fonte
1
Vi o ícone de movimento, pensei que o ícone de agarrar era melhor. Mas agora que você apontou que o w3c considera que o cursor "indica que algo deve ser movido", faz mais sentido. Obrigado.
às.
2
@at: você pode especificar vários cursores em uma lista delimitada por vírgulas e o agente do usuário deve usar o primeiro que entender. Então você pode usar os -moz * ones e "mover" como um substituto.
mu é muito curto
14
@muistooshort tem certeza de que uma lista de vírgulas ainda funciona? Estou usando cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;com o último preferido.
22613 Bob Stein
2
@ BobStein-VisiBone: Eu acho que poderia ter havido alguma confusão lá em cima alguns anos atrás. AFAIK a lista vírgula funciona se você está especificando vários formatos como cursor: url(example.svg#linkcursor), url(hyper.cur), pointer, em vez de vários valores possíveis. Eu acho que sua abordagem pode ser necessária.
mu é muito curto
418

Caso alguém tropeçar nessa pergunta, provavelmente é isso que você estava procurando:

.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
fonte
44
por algum motivo, o 'agarrar' só aparece quando solto o mouse. Alguma ideia de por que é assim?
Jona
@Jona, meu palpite é que você não adicionou a grabbableclasse a nenhum elemento que possa ser capturado e está alternando a classe quando ela está sendo arrastada.
Emile Bergeron
1
boa resposta estendida, obrigado por adicionar a parte "agarrar" extra. bom toque. :)
scotself 19/08/16
1
Para quem tiver problemas com esta solução, tive que definir o grabcursor em :hovervez do seletor simples, ou seja, .grabbable:hoverno exemplo acima.
Markus Amalthea Magnuson
@Jona adicionando esses estilos para o pai <ul>, em vez de <li>no meu caso resolvido a questão
Arthur Tarasov
52

CSS3 grab e grabbingagora são permitidos valores para cursor. Para fornecer vários fallbacks para compatibilidade entre navegadores 3, incluindo arquivos de cursor personalizados, uma solução completa seria assim:

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

Atualização 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;
}
Volker E.
fonte
1
Sua postagem é uma duplicata da J.Steve's
9
@ user2230470 É diferente em dois pontos importantes: primeiro, fornece uma imagem do cursor para os navegadores que não suportam grab, mas as imagens do cursor. Segundo, é uma prática recomendada ter sintaxe de padrões após os valores prefixados pelo fornecedor.
Volker E.
realmente?! Por quê? Além disso, onde posso encontrar mais informações sobre práticas padrão semelhantes a essas.
8
@ user2230470 - porque nos casos em que um navegador suporta 2 comportamentos em que o prefixado pode ter sido implementado um pouco antes da finalização do padrão (e, portanto, pode agir de maneira diferente), você deseja que ele use o padrão ... e qualquer definição que venha ÚLTIMO é o que o navegador usará. Portanto, o padrão deve ir por último.
Jimbo Jonny
3
é images/grab.curum exemplo de URL para uma imagem que eu preciso hospedar no meu servidor da web ou isso é algo mágico do IE?
Jon Z
11

"mais personalizado" que os cursores CSS significa algum tipo de plug-in, mas você pode especificar totalmente seus próprios cursores usando CSS. Eu acho que esta lista tem o que você deseja:

.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: cursor CSS Property @ W3Schools

Trilha de Winfield
fonte
5

Você pode criar seus próprios cursores e configurá-los como o cursor usando cursor: url('path-to-your-cursor');, ou encontrar o Firefox e copiá-los (bônus: uma boa aparência consistente em todos os navegadores).

Ry-
fonte
5

Talvez eu esteja atrasado, mas você pode tentar o código a seguir, que funcionou para mim no Drag and Drop.

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

}

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

Você pode usar as imagens abaixo no URL acima. Verifique se é uma imagem transparente PNG. Caso contrário, baixe um do google.

insira a descrição da imagem aqui insira a descrição da imagem aqui

Jeeva
fonte