2012-12-10 16 views
76

Już zaprojektowałem i wdrożyłem suwak jQuery UI w projekcie. Choć jest mobilny i skaluje się prawidłowo, nie pozwala na dotykanie i przeciąganie. Zamiast tego musisz dotknąć miejsca, w którym chcesz przesunąć suwak. Interfejs jQuery dla urządzeń mobilnych obsługuje to, ale mam czas poświęcony na to, co już jest.suwak jQuery UI Obsługa Touch & Drag/Drop na urządzeniach mobilnych

Funkcjonalność chcemy: Here
Co używamy: Here

Na pulpicie nie można odróżnić. Na urządzeniu mobilnym jest to oczywiste.

Ktoś wie, jak dodać tę obsługę do interfejsu użytkownika jquery?

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

Dzięki Seth

+1

możliwy duplikat suwaków [jQuery UI na urządzeniach dotykowych] (http://stackoverflow.com/questions/6360249/jquery-ui-sliders-on-touch-devices) – Foreever

Odpowiedz

187

jQuery UI nie posiada dotykowy wsparcie. Powinieneś używać go z jQuery-ui touch punch.

Wystarczy dodać skrypt po 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> 

Można również użyć 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> 

Uwaga: Lepiej dać this repo gwiazda na Github.

+0

Dziękuję. Działa świetnie. – Andy

+0

To oszczędza mój dzień! – Dr3am3rz

+0

Dziękuję bardzo! To naprawdę oszczędza mój dzień! –

0

Możesz po prostu połączyć ten js.

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

dziękuję.

+0

Yup! To jest ostatnia linia w istniejącej odpowiedzi ... – Seth

Powiązane problemy