Sliders da jQuery UI em dispositivos de toque


95

Estou desenvolvendo um site usando jQuery UI e há vários elementos em meu site que parecem ser incompatíveis quando visualizados em dispositivos touchscreen; eles não causam nenhum erro, mas o comportamento não é o que deveria ser.

Os elementos em questão são controles deslizantes e rangeliders conforme definido pelo jQuery UI; na tela de toque, em vez de registrar um toque como pegar uma alça e arrastar como arrastar a alça pelo controle deslizante, ele apenas desliza toda a página da web para o lado da tela. Funciona se você tocar na alça e depois no local do controle deslizante onde deseja que a alça fique, mas isso é muito lento e não é o ideal. Alguma ideia?

Tentei baixar o plugin jqtouch e depois anexar .touch([...])a todas as chamadas de slider () e rangelider (), mas não funcionou.

Obrigado!

ATUALIZAÇÃO: encontrei este "patch" no site jQuery UI

http://bugs.jqueryui.com/ticket/4143

que diz que facilita o controle deslizante no iPhone, mas agora outra pergunta estúpida: como faço para incorporar esse "patch" ao meu código? Devo apenas incluí-lo no início do código como um plugin?

Respostas:


140

Esta biblioteca parece oferecer o que você procura:

https://github.com/furf/jquery-ui-touch-punch#readme

Ele também tem alguns exemplos de código de uso (basta adicionar o plug-in):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

28
Nota para as massas: prenda-o à alça do controle deslizante, não a tudo. (Para o controle deslizante jQuery que seria$('.ui-slider-handle').draggable();
PaulSkinner

17
Agora posso mover o controle deslizante por toda a página !! Isto é ridículo.
dezman

Posso mover a alça por toda a página no Firefox Mac. Gostaria de saber se precisamos colocar um if condicional (ipad | iphone) ... então arrastável ().
Joe Hyde

13
Raspe meu comentário original acima. Isso funciona apenas incluindo este plug-in no HEAD. Adicione o <script src> por não adicionar $ (selector) .draggable (); para fazer os controles deslizantes funcionarem.
Joe Hyde

6
Você só precisa incluir o script touch punch e é isso. Como @JoeHyde disse em seu segundo comentário, não há necessidade de chamar .draggable () em nenhum elemento. Basta incluir o script e ele deve funcionar.
Jack Vial

22

Só queria adicionar algumas informações novas sobre isso. Touch-punch funcionará bem para Ipads e dispositivos Android. Mas o controle deslizante não funcionará em dispositivos móveis do Windows, pelo que pude testar (com as versões mais recentes do jquery ui e Touch punch)

A correção é bastante simples, basta adicionar as seguintes regras CSS ao .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

Espero que isto ajude


não está trabalhando para mim? qualquer link de exemplo, por favor @Stijn_d
ShibinRagh

uhh, mas isso arruína o funcionamento do soco de toque real
user151496

Isso resolveu meu problema. Obrigado!
parker_codes

Nem trabalhando comigo em um laptop Dell com tela sensível ao toque jsfiddle.net/jhtcqbqo
Jean-François Beauchamp

6

Como @dazbradbury sugeriu, a biblioteca touchpunch pode ajudar a traduzir os eventos de mouse em eventos de toque. Os parâmetros em .draggable () limitam o movimento do controle deslizante para que ele não possa ser movido além de seu controle deslizante pai.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDITAR: Se você já estiver usando um controle deslizante de IU do Jquery , você só precisa incluir a biblioteca touchpunch. Não chame .draggable () para o .ui-slider-handle porque isso sobrescreverá a funcionalidade existente.


Isso fez funcionar para mim. O único problema agora é que a região de fundo (quando o intervalo: "min" é definido) não está obedecendo à posição do controle deslizante.
ejectamenta

Esta deve ser a resposta aceita.
ionalchemist

3

Eu tive o mesmo problema. Eu desenvolvi uma UI de controle deslizante elaborada com base no controle deslizante da interface de usuário do jQuery apenas para perceber que ele não funciona em dispositivos móveis. Tentei as sugestões listadas aqui, mas como tenho uma solução personalizada baseada apenas no jQuery UI Slider, ela não funcionou.

Basta usar noUiSlider .

Ele faz todos os recursos elaborados (e muito mais), como o que eu construí em cima do controle deslizante de UI do jQuery. Funciona perfeitamente em dispositivos móveis e também é fácil de estilizar.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.