Suwaki jQuery UI na urządzeniach dotykowych

Tworzę witrynę internetową przy użyciu interfejsu użytkownika jQuery i jest kilka elementów w mojej witrynie, które wydają się być niekompatybilne podczas wyświetlania na urządzeniach z ekranem dotykowym; nie powodują żadnych błędów, ale zachowanie nie jest takie, jakie powinno być.

Elementy, o których mowa, to suwaki i zakresy suwaków zgodnie z definicją w interfejsie użytkownika jQuery; na ekranie dotykowym, zamiast rejestrować dotknięcie jako podniesienie uchwytu i przeciągnięcie jako przeciągnięcie uchwytu po suwaku, po prostu przesuwa całą stronę internetową na bok ekranu. Działa, jeśli dotkniesz uchwytu, a następnie dotknij miejsca na suwaku, w którym chcesz, aby uchwyt się skończył, ale jest to bardzo powolne i nie idealne. Jakieś pomysły?

Próbowałem pobrać wtyczkę jqtouch, a następnie dołączyć .touch([...])do wszystkich wywołań suwaków () i rangelider (), ale to nie zadziałało.

Dzięki!

AKTUALIZACJA: znalazłem tę „poprawkę” w witrynie interfejsu użytkownika jQuery

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

to mówi, że ułatwia suwak na iPhonie, ale teraz kolejne głupie pytanie: jak mam włączyć tę „poprawkę” do mojego kodu? Czy po prostu dołączam go na początku kodu, jak wtyczkę?

Wydaje się, że ta biblioteka oferuje to, czego szukasz:

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

Zawiera również przykładowy kod użycia (po prostu dodaj wtyczkę):

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

Chciałem tylko dodać nowe informacje na ten temat. Touch-punch będzie działał dobrze na iPadach i urządzeniach z Androidem. Ale suwak nie będzie działał na urządzeniach mobilnych z systemem Windows, o ile mogłem przetestować (z najnowszymi wersjami jquery ui & Touch punch)

Poprawka jest dość prosta, po prostu dodaj następujące reguły CSS do uchwytu suwaka .ui-slider:

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

Mam nadzieję że to pomoże

Jak zasugerował @dazbradbury, biblioteka touchpunch może pomóc w przetłumaczeniu zdarzeń myszy na zdarzenia dotyku. Parametry w .draggable () ograniczają ruch suwaka, więc nie można go przesunąć poza jego rodzica suwaka.

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

EDYCJA: Jeśli korzystasz już z suwaka interfejsu użytkownika Jquery , wystarczy dołączyć bibliotekę touchpunch. Nie wywołuj .draggable () dla uchwytu suwaka .ui-slider-handle, ponieważ spowoduje to nadpisanie istniejącej funkcjonalności.

Miałem ten sam problem. Opracowałem rozbudowany interfejs użytkownika oparty na suwaku jQuery UI tylko po to, aby zdać sobie sprawę, że w ogóle nie działa na urządzeniach mobilnych. Wypróbowałem sugestie wymienione tutaj, ale ponieważ mam niestandardowe rozwiązanie oparte tylko na suwaku interfejsu użytkownika jQuery, nie zadziałało.

Po prostu użyj noUiSlider .

Wykonuje wszystkie wyszukane funkcje (i wiele więcej), podobnie jak ta, którą zbudowałem na suwaku jQuery UI. Pięknie działa na urządzeniach mobilnych i jest łatwy w stylizacji.