Deslizadores de interfaz de usuario de jQuery en dispositivos táctiles

95

Estoy desarrollando un sitio web usando jQuery UI y hay varios elementos en mi sitio que parecen ser incompatibles cuando se ven en dispositivos con pantalla táctil; no causan ningún error, pero el comportamiento no es el que debería ser.

Los elementos en cuestión son deslizadores y deslizadores de rango definidos por jQuery UI; en la pantalla táctil, en lugar de registrar un toque como tomar una manija y arrastrar como arrastrar la manija a través del control deslizante, simplemente desliza toda la página web hacia el costado de la pantalla. Funciona si toca el mango y luego toca la ubicación en el control deslizante donde desea que termine el mango, pero esto es muy lento y no ideal. ¿Algunas ideas?

Intenté descargar el complemento jqtouch y luego adjuntarlo .touch([...])a todas las llamadas a slider () y rangelider (), pero eso no funcionó.

¡Gracias!

ACTUALIZACIÓN: Encontré este "parche" en el sitio web de jQuery UI

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

eso dice que facilita el control deslizante en iPhone, pero ahora para otra pregunta estúpida: ¿cómo incorporo este "parche" en mi código? ¿Lo incluyo al principio del código como un complemento?

slider touch jqtouch jqcoder
fuente

Respuestas:

140

Esta biblioteca parece ofrecer lo que está buscando:

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

También tiene un código de uso de ejemplo (simplemente agregue el complemento):

<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>
Dazbradbury
fuente
28
Nota para las masas: adjúntelo al mango del control deslizante, no al conjunto. (Para el control deslizante de jQuery que sería$('.ui-slider-handle').draggable();
PaulSkinner
17
¡Ahora puedo mover el control deslizante por toda la página! Esto es ridículo.
dezman
Puedo mover la manija por toda la página en Firefox Mac. Me pregunto si necesitamos colocar un condicional if (ipad | iphone) ... then draggable ().
Joe Hyde
13
Tacha mi comentario original arriba. Esto funciona con solo incluir este complemento en HEAD. Agregue el <script src> por no agregar $ (selector) .draggable (); para hacer que funcionen los controles deslizantes.
Joe Hyde
6
Solo necesita incluir el script de perforación táctil y eso es todo. Como dijo @JoeHyde en su segundo comentario, no hay necesidad de llamar a .draggable () en ningún elemento. Solo incluye el guión y debería funcionar.
Jack Vial
22

Solo quería agregar información nueva sobre esto. Touch-punch funcionará bien para Ipads y dispositivos Android. Pero el control deslizante no funcionará en dispositivos móviles con Windows, hasta donde pude probar (con las últimas versiones de jquery ui y Touch punch)

La solución es bastante simple, solo agregue las siguientes reglas CSS al .ui-slider-handle:

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

Espero que esto ayude

Stijn_d
fuente
no funciona para mi? cualquier enlace de ejemplo por favor @Stijn_d
ShibinRagh
uhh, pero esto arruina el funcionamiento del punzón táctil real
user151496
Esto solucionó mi problema. ¡Gracias!
parker_codes
Ni trabajar conmigo en una computadora portátil Dell con pantalla táctil jsfiddle.net/jhtcqbqo
Jean-François Beauchamp
6

Como sugirió @dazbradbury, la biblioteca touchpunch puede ayudar a traducir los eventos del mouse en eventos táctiles. Los parámetros en .draggable () limitan el movimiento del control deslizante para que no se pueda mover más allá de su control deslizante principal.

<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: Si ya está utilizando un control deslizante de la interfaz de usuario de Jquery , solo necesita incluir la biblioteca touchpunch. No llame a .draggable () para .ui-slider-handle porque sobrescribirá la funcionalidad existente.

DPH Trading Casa de placa danesa
fuente
Esto hizo que me funcionara. El único problema ahora es que la región de fondo (cuando se establece el rango: "min") no obedece a la posición del control deslizante.
eyección el
Esta debería ser la respuesta aceptada.
ionalchemist
3

Yo tuve el mismo problema. Desarrollé una elaborada interfaz de usuario deslizante basada en el control deslizante de jQuery UI solo para darme cuenta de que no funciona en absoluto en dispositivos móviles. Probé las sugerencias enumeradas aquí, pero como tengo una solución personalizada que solo se basa en jQuery UI Slider, no funcionó.

Simplemente use noUiSlider .

Tiene todas las funciones elaboradas (y mucho más) como la que construí sobre el control deslizante de jQuery UI. Funciona a la perfección en dispositivos móviles y también es fácil de diseñar.

Adam Karacsony
fuente