jQuery UI slider sui dispositivi touch


96

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?

Risposte:


141

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>

28
Nota alle masse: attaccalo alla maniglia di scorrimento, non al tutto. (Per lo slider jQuery sarebbe$('.ui-slider-handle').draggable();
PaulSkinner

17
Ora posso spostare la maniglia di scorrimento in tutta la pagina !! Questo è ridicolo.
dezman

Posso spostare la maniglia in tutta la pagina in Firefox Mac. Mi chiedo se dobbiamo inserire un condizionale if (ipad | iphone) ... quindi trascinabile ().
Joe Hyde

13
Gratta il mio commento originale sopra. Funziona solo includendo questo plug-in in HEAD. Aggiungi lo <script src> da non aggiungere $ (selector) .draggable (); per far funzionare le maniglie di scorrimento.
Joe Hyde

6
Hai solo bisogno di includere il copione touch punch e il gioco è fatto. Come ha detto @JoeHyde nel suo secondo commento, non è necessario chiamare .draggable () su alcun elemento. Basta includere lo script e dovrebbe funzionare.
Jack Vial

22

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


non funziona per me? qualsiasi link di esempio per favore @Stijn_d
ShibinRagh

uhh ma questo rovina il funzionamento dell'attuale touch punch
user151496

Questo ha risolto il mio problema. Grazie!
parker_codes

Né funziona da me su un laptop Dell con touchscreen jsfiddle.net/jhtcqbqo
Jean-François Beauchamp,

6

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.


Questo ha funzionato per me. L'unico problema ora è che la regione dello sfondo (quando è impostato range: "min") non obbedisce alla posizione del cursore.
ejectamenta

5

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.