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.