4

Eu tenho um elemento que vai pode ser movido pela tela.

Então pensando na ux/ui eu queria poder dar dois feedbacks para o usuário. O primeiro caso ele coloque o mouse sobre o elemento, e o segundo caso ele segure e arraste o elemento. Repare que na imagem abaixo tem a "mãozinha" e depois a "mãozinha" fechada.

inserir a descrição da imagem aqui

Aqui tem um exemplo básico.

OBS: Repare que eu usei cursor 2x. Pois o primeiro é o fallback do segundo. Por exemplo, se o FireFox não reconhece o -webkit-grab vai utilizar o pointer. Já para quando for arrastar no caso do FireFox a ideia seria ter como fallback do pointer o w-resize.

$(function () {
  $("#draggable").draggable();
});
#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  background-color: red;
  cursor: pointer;
  cursor: -webkit-grab;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content"></div>

1 Resposta 1

4

Com CSS mesmo, :active não resolveria?

$(function () {
  $("#draggable").draggable();
});
#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  background-color: red;
  cursor: pointer;
  cursor: -webkit-grab;
}

#draggable:active{
  cursor: grabbing;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content"></div>

3
  • É isso ai! []´s
    – hugocsl
    7/01/2019 às 11:42
  • No Firefox o :active não funciona.
    – Sam
    7/01/2019 às 11:58
  • @Sam é verdade, testei agora no FF e no active não funcionou. Mas me conteitei como o w-resize no hover mesmo
    – hugocsl
    7/01/2019 às 12:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .