Suwak jQuery UI Obsługa funkcji Touch & Drag / Drop na urządzeniach mobilnych

102

Mam już stylizację i zaimplementowałem w projekcie suwak jQuery UI. Chociaż jest responsywny, suwak nie reaguje na dotykanie i przeciąganie. Zamiast tego musisz dotknąć miejsca, w którym chcesz przesunąć suwak. Chciałbym uniknąć zamiany na mobilny interfejs użytkownika jQuery, który obsługuje dotykanie i przeciąganie, ponieważ już intensywnie używamy interfejsu użytkownika jQuery (niemobilnego).

Funkcjonalność, której chcemy: Tutaj
Czego używamy: Tutaj

Na komputerze nie widać różnicy. Na urządzeniu mobilnym jest to oczywiste.

Czy ktoś wie, jak dodać tę obsługę do interfejsu użytkownika jQuery?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});
Seth
źródło

Odpowiedzi:

262

Interfejs użytkownika jQuery nie obsługuje dotyku. Powinieneś używać go z dziurkaczem dotykowym jQuery-ui .

Po prostu dodaj skrypt po interfejsie jQuery:

<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żesz także 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 nadaj temu repozytorium gwiazdkę na Github.

Nazwa Użytkownika
źródło
To ratuje mój dzień!
Dr3am3rz
Dziękuję Ci bardzo! To naprawdę ratuje mój dzień !!
Syamsoul Azrien
Tak, naprawiono również błąd polegający na tym, że suwak nie wybierał właściwych wartości.
Ronen Festinger
1
działa jak charme z rails5 urządzeniami z Androidem i iOS
Stef Hej
super… działa płynnie… :) Jedna obserwacja jest taka, że ​​na urządzeniach z systemem iOS przesuwanie suwaka nie przesuwa się, gdy go dotykamy, ale kiedy puszczamy z niego dotyk, przesuwa się on w tym momencie. jakiś pomysł, dlaczego tak się dzieje? czy masz na to jakieś rozwiązanie?
Rahul J. Rane
4

Możesz po prostu połączyć ten plik 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ęki.

Miecz I
źródło
to sprawiło, że działało naprawdę szybko, naprawdę dobrze. dzięki
tijnn