Schieberegler für die jQuery-Benutzeroberfläche auf Touch-Geräten

Ich entwickle eine Website mit der jQuery-Benutzeroberfläche. Auf meiner Website befinden sich mehrere Elemente, die auf Touchscreen-Geräten nicht kompatibel zu sein scheinen. Sie verursachen keine Fehler, aber das Verhalten ist nicht so, wie es sein sollte.

Bei den fraglichen Elementen handelt es sich um Schieberegler und Bereichsschieberegler, wie sie von der jQuery-Benutzeroberfläche definiert wurden. Anstatt eine Berührung als Aufnehmen eines Griffs und ein Ziehen als Ziehen des Griffs über den Schieberegler zu registrieren, wird auf dem Touchscreen nur die gesamte Webseite zur Seite des Bildschirms geschoben. Es funktioniert, wenn Sie auf den Griff tippen und dann auf die Stelle auf dem Schieberegler tippen, an der der Griff enden soll. Dies ist jedoch sehr langsam und nicht ideal. Irgendwelche Ideen?

Ich habe versucht, das jqtouch-Plugin herunterzuladen und dann .touch([...])an alle Aufrufe von slider () und rangelider () anzuhängen, aber das hat nicht funktioniert.

Vielen Dank!

UPDATE: Ich habe diesen "Patch" auf der jQuery UI-Website gefunden

http://bugs.jqueryui.com/ticket/4143

das heißt, es erleichtert den Schieberegler auf dem iPhone, aber jetzt zu einer anderen dummen Frage: Wie kann ich diesen "Patch" in meinen Code integrieren? Füge ich es einfach wie ein Plugin am Anfang des Codes ein?

Diese Bibliothek scheint das zu bieten, wonach Sie suchen:

https://github.com/furf/jquery-ui-touch-punch#readme

Es gibt auch einen Beispiel-Verwendungscode (fügen Sie einfach das Plugin hinzu):

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

Ich wollte nur ein paar neue Infos dazu hinzufügen. Touch-Punch funktioniert gut für Ipads und Android-Geräte. Der Schieberegler funktioniert jedoch nicht auf Windows Mobile-Geräten, soweit ich dies testen konnte (mit den neuesten Versionen von jquery ui & Touch Punch).

Das Update ist recht einfach. Fügen Sie einfach die folgenden CSS-Regeln zum .ui-slider-handle hinzu:

-ms-touch-action: none;
touch-action: none;

Hoffe das hilft

Wie von @dazbradbury vorgeschlagen, kann die Touchpunch- Bibliothek dabei helfen, die Mausereignisse in Berührungsereignisse zu übersetzen. Die Parameter in .draggable () begrenzen die Bewegung des Schiebereglers, sodass er nicht über das übergeordnete Element des Schiebereglers hinaus verschoben werden kann.

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

BEARBEITEN: Wenn Sie bereits einen Jquery-UI-Schieberegler verwenden , müssen Sie nur die Touchpunch-Bibliothek einschließen. Rufen Sie nicht .draggable () für das .ui-slider-Handle auf, da dadurch die vorhandene Funktionalität überschrieben wird.

Ich hatte das gleiche Problem. Ich habe eine ausgefeilte Slider-Benutzeroberfläche entwickelt, die auf dem Slider der jQuery-Benutzeroberfläche aufbaut, nur um festzustellen, dass sie auf Mobilgeräten überhaupt nicht funktioniert. Ich habe die hier aufgeführten Vorschläge ausprobiert, aber da ich eine benutzerdefinierte Lösung habe, die nur auf dem jQuery UI Slider basiert, hat sie nicht funktioniert.

Verwenden Sie einfach noUiSlider .

Es bietet alle aufwändigen Funktionen (und vieles mehr), die ich auf dem Schieberegler der jQuery-Benutzeroberfläche erstellt habe. Es funktioniert wunderbar auf Mobilgeräten und ist auch einfach zu stylen.