example - Control deslizante jQuery UI Touch & Drag/Drop support en dispositivos móviles

sortable jquery ejemplos

Question

Ya diseñé e implementé el deslizador jQuery UI en un proyecto. Si bien es móvil y escala correctamente, no permite tocar y arrastrar. En su lugar, debe tocar hacia dónde desea que vaya el control deslizante. La interfaz de usuario móvil de jQuery es compatible con esto, pero tengo tiempo invertido en lo que ya está allí.

La funcionalidad que queremos: Here
Qué estamos usando: Here

En un escritorio no se nota la diferencia. En un dispositivo móvil, es evidente.

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

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

Gracias, Seth

Answer 1

Puedes simplemente 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.

Answer 2

jQuery ui no tiene soporte táctil. Debe 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 puedes 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.