jQuery UI slider sui dispositivi touch

Sto sviluppando un sito web utilizzando jQuery UI e ci sono diversi elementi sul mio sito che sembrano essere incompatibili se visualizzati su dispositivi touchscreen; non causano errori, ma il comportamento non è quello che dovrebbe essere.

Gli elementi in questione sono slider e rangelider come definiti da jQuery UI; sul touch screen, invece di registrare un tocco come prendere una maniglia e un trascinamento come trascinare la maniglia attraverso il dispositivo di scorrimento, fa scorrere l'intera pagina web sul lato dello schermo. Funziona se tocchi la maniglia e quindi tocca la posizione sul cursore in cui vuoi che finisca la maniglia, ma questo è molto lento e non è l'ideale. Qualche idea?

Ho provato a scaricare il plugin jqtouch e quindi a collegarmi .touch([...])a tutte le chiamate a slider () e rangelider (), ma non ha funzionato.

Grazie!

AGGIORNAMENTO: ho trovato questa "patch" sul sito web dell'interfaccia utente di jQuery

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

questo dice che facilita lo slider su iPhone, ma ora un'altra stupida domanda: come faccio a incorporare questa "patch" nel mio codice? Lo includo solo all'inizio del codice come un plugin?

Questa libreria sembra offrire quello che stai cercando:

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

Ha anche qualche esempio di codice d'uso (aggiungi semplicemente il plugin):

<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>

Volevo solo aggiungere alcune nuove informazioni su questo. Touch-punch funzionerà bene per Ipad e dispositivi Android. Ma lo slider non funzionerà sui dispositivi mobili Windows, per quanto posso testare (con le ultime versioni di jquery ui e Touch punch)

La correzione è abbastanza semplice, basta aggiungere le seguenti regole CSS al .ui-slider-handle:

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

Spero che questo ti aiuti

Come suggerito da @dazbradbury, la libreria touchpunch può aiutare a tradurre gli eventi del mouse in eventi touch. I parametri in .draggable () limitano il movimento dello slider in modo che non possa essere spostato oltre il suo slider genitore.

<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>

MODIFICA: se stai già utilizzando un dispositivo di scorrimento dell'interfaccia utente Jquery , devi solo includere la libreria touchpunch. Non chiamare .draggable () per .ui-slider-handle perché sovrascriverà la funzionalità esistente.

Ho avuto lo stesso problema. Ho sviluppato un'interfaccia utente di scorrimento elaborata basata sullo slider dell'interfaccia utente di jQuery solo per rendermi conto che non funziona affatto sui dispositivi mobili. Ho provato i suggerimenti elencati qui, ma poiché ho una soluzione personalizzata basata solo su jQuery UI Slider, non ha funzionato.

Basta usare noUiSlider .

Fa tutte le funzionalità elaborate (e molto altro) come quella che ho costruito sopra il cursore dell'interfaccia utente di jQuery. Funziona magnificamente sui dispositivi mobili ed è anche facile da modellare.