Suwaki jQuery UI na urządzeniach dotykowych

96

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

slider touch jqtouch

— jqcoder
źródło

141

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>

— dazbradbury
źródło

28

Uwaga dla mas: przymocuj go do uchwytu suwaka, a nie do całości. (Dla suwaka jQuery byłby to$('.ui-slider-handle').draggable();

— PaulSkinner

17

Teraz mogę przesuwać uchwyt suwaka po całej stronie !! To jest niedorzeczne.

— dezman

W przeglądarce Firefox Mac mogę przesuwać uchwyt po całej stronie. Zastanawiam się, czy musimy umieścić warunek if (ipad | iphone) ... następnie przeciągnij ().

— Joe Hyde,

13

Podrap mój oryginalny komentarz powyżej. Działa to po prostu przez włączenie tej wtyczki do HEAD. Dodaj <script src> by nie dodawać $ (selector) .draggable (); do działania uchwytów suwaka.

— Joe Hyde,

6

Musisz tylko dołączyć skrypt do uderzenia dotykowego i to wszystko. Jak @JoeHyde powiedział w swoim drugim komentarzu, nie ma potrzeby wywoływania .draggable () w żadnym elemencie. Po prostu dołącz skrypt i powinien działać.

— Jack Vial

22

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

— Stijn_d
źródło

nie działa dla mnie? jakikolwiek przykładowy link proszę @Stijn_d

— ShibinRagh

uhh, ale to psuje działanie rzeczywistego uderzenia dotykowego

— user151496

To rozwiązało mój problem. Dzięki!

— parker_codes

Ani pracuję dla mnie na laptopie Dell z ekranem dotykowym jsfiddle.net/jhtcqbqo

— Jean-François Beauchamp

6

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.

— DPH Trading Danish Plate House
źródło

To działa na mnie. Jedynym problemem jest teraz to, że obszar tła (gdy ustawiony jest zakres: "min") nie jest zgodny z pozycją suwaka.

— ejectamenta

5

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.

— Adam Karacsony
źródło