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);
  }
});

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.


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.


to sprawiło, że działało naprawdę szybko, naprawdę dobrze. dzięki
— tijnn
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.