Soporte deslizante de jQuery UI para tocar y arrastrar / soltar en dispositivos móviles

102

Ya diseñé e implementé el control deslizante jQuery UI en un proyecto. Aunque responde, el control deslizante no responde cuando lo tocan y lo arrastran. En su lugar, debe tocar el lugar donde desea que vaya el control deslizante. Me gustaría evitar cambiar a la interfaz de usuario móvil de jQuery, que admite tocar y arrastrar, ya que ya utilizamos ampliamente la interfaz de usuario de jQuery (no móvil).

La funcionalidad que queremos: Aquí
Qué estamos usando: Aquí

En un escritorio no se puede notar la diferencia. En un dispositivo móvil es evidente.

¿Alguien sabe cómo agregar este soporte a jquery UI?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

— Seth
fuente

posible duplicado de deslizadores jQuery UI en dispositivos táctiles

— foreever

Respuestas:

262

jQuery ui no tiene soporte táctil. Deberías usarlo con jQuery-ui touch punch .

Simplemente agregue el script después de jQuery ui:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

También puede usar cdnjs:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Nota: Mejor dale a este repositorio una estrella en Github.

— nombre de usuario
fuente

¡Esto me salva el día!

— Dr3am3rz

¡Muchas gracias! ¡Esto realmente me salva el día!

— Syamsoul Azrien

Sí, también solucionó un error con el control deslizante que no seleccionaba los valores correctos.

— Ronen Festinger

funciona como un encanto con los dispositivos Android e ios rails5

— Stef Hej

genial ... funciona sin problemas ... :) Una observación es que en los dispositivos iOS, cuando deslizamos el control deslizante, no se desliza cuando lo tocamos, sino que cuando lo soltamos, se desliza en ese punto. ¿Alguna idea de por qué sucede esto? tienes alguna solución para esto?

— Rahul J. Rane

Simplemente puede vincular este js.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Gracias.

— Espada yo
fuente

esto hizo que funcionara realmente rápido, realmente bien. gracias

— tijnn