jQuery UI-Schieberegler Touch & Drag / Drop-Unterstützung auf Mobilgeräten

102

Ich habe den jQuery UI-Schieberegler bereits gestylt und in ein Projekt implementiert. Obwohl der Schieberegler reagiert, reagiert er nicht auf Berühren und Ziehen. Stattdessen müssen Sie berühren, wohin der Schieberegler gehen soll. Ich möchte vermeiden, auf die mobile jQuery-Benutzeroberfläche zu wechseln, die das Berühren und Ziehen unterstützt, da wir die jQuery-Benutzeroberfläche (nicht mobil) bereits ausgiebig verwenden.

Die Funktionalität, die wir wollen: Hier
Was wir verwenden: Hier

Auf einem Desktop kann man keinen Unterschied feststellen. Auf einem mobilen Gerät ist es offensichtlich.

Weiß jemand, wie man diese Unterstützung zur jquery-Benutzeroberfläche hinzufügt?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

— Seth
quelle

Mögliches Duplikat von jQuery UI-Schiebereglern auf Touch-Geräten

— Foreever

Antworten:

262

jQuery ui hat keine Touch-Unterstützung. Sie sollten es mit jQuery-ui Touch Punch verwenden .

Fügen Sie einfach das Skript nach jQuery ui hinzu:

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

Sie können auch cdnjs verwenden:

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

Hinweis: Geben Sie diesem Repo besser einen Stern auf Github.

— Nutzername
quelle

Das rettet meinen Tag!

— Dr3am3rz

Vielen Dank! Das spart mir wirklich den Tag !!

— Syamsoul Azrien

Ja, es wurde auch ein Fehler behoben, bei dem der Schieberegler nicht die richtigen Werte auswählte.

— Ronen Festinger

funktioniert wie ein charme mit Rails5 Android und iOS-Geräten

— Stef Hej

großartig .. es funktioniert reibungslos .. :) Eine Beobachtung ist, dass auf iOS-Geräten, wenn wir den Schieberegler schieben, er nicht gleitet, wenn wir ihn berühren, aber wenn wir die Berührung loslassen, gleitet er an diesem Punkt. Irgendeine Idee, warum das passiert? Hast du eine Lösung dafür?

— Rahul J. Rane

Sie können diese js einfach verlinken.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Vielen Dank.

— Schwert I.
quelle

Dadurch funktionierte es sehr schnell und sehr gut. danke

— tijnn