Touch-Events oder Gesten für "Wischen" mit jQuery

[suit]

Hallo,

ich benötige zum "Weiterblättern" in einem scrollbaren Bereich eine Wischgeste zum Weiter- oder Zurückblättern.

Gefunden habe ich hierzu aber nichts - die Apple-Doku ist mal wieder wenig aussagekräfigt:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveVisualEffects/InteractiveVisualEffects.html#//apple_ref/doc/uid/TP40008032-CH3-SW3

Da wird zwar gesagt, dass es "gestures" gibt, aber nicht welche und wie man diese verwendet.

Ich hab' mir jetzt mit folgendem selbst geholfen:

		var touchStartX = 0;  
		var touchEndX = 0;  
		var touchMinDistance = (($('.scroller ul.img>li>a').width()+15)*0.75);  
  
		$('.scroller').bind(  
			'touchstart',  
			function(e) {  
				var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
				touchStartX = touch.pageX;  
			}  
		);  
		  
		$('.scroller').bind(  
			'touchmove',  
			function(e) {  
				var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
				touchEndX = touch.pageX;  
			}  
		);  
  
		$('.scroller').bind(  
			'touchend',  
			function(e) {  
				$('.slider').slider('value', ($('.slider').slider('value') + Math.floor((touchStartX-touchEndX)/touchMinDistance)));  
			}  
		);

Funktioniert so ansich recht gut (auf Android und iOS-Geräten) - alledings wird eben nur der Enfangs- und Endpunkt der "Geste" verglichen und dann - wenn die differenz groß genug ist, wird eben die Anzahl an Schritten in eine Richtung verschoben.

Wenn jemand jetzt ein bisschen "Herumkreiselt" oder ein liegendes U zieht, wird das natürlich auch als "wischen" gewertet.

Natürlich könnte man jetzt alle Zwischenstationen vergleichen und schauen, ob der Winkel zwischen den Punkten ähnlich ist und schauen ob die Richtung nicht weit aus der Horizontalen abweicht, aber das ist relativ aufwändig.

Die Frage also: gibts hierfür eine schlauere Methode das zu lösen - oder ein fertiges Plugin. Also etwas das Gesten für "horziontales Wischen" usw erkennt.

Danke im voraus.

[dedlfix]

Hi!

Vorab, ich kenne die Lösung nicht, aber wenn du meine Gedanken dazu lesen willst ...

ich benötige zum "Weiterblättern" in einem scrollbaren Bereich eine Wischgeste zum Weiter- oder Zurückblättern.

Eigentlich sollte das auf einer höheren Ebene ausgewertet werden. Dein Script sollte nur das Blätter-Ereignis zu sehen bekommen. Dann bliebe es kompatibel zu allen Arten, seinen Blätter-Wunsch auszudrücken, nicht nur durch einen Wisch.

Gefunden habe ich hierzu aber nichts - die Apple-Doku ist mal wieder wenig aussagekräfigt:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveVisualEffects/InteractiveVisualEffects.html#//apple_ref/doc/uid/TP40008032-CH3-SW3

Da wird zwar gesagt, dass es "gestures" gibt, aber nicht welche und wie man diese verwendet.

Da gibt es doch einen Abschnitt "Using Gestures to Translate, Scale, and Rotate Elements". Der hilft auch nicht?

Funktioniert so ansich recht gut (auf Android und iOS-Geräten) - alledings wird eben nur der Enfangs- und Endpunkt der "Geste" verglichen und dann - wenn die differenz groß genug ist, wird eben die Anzahl an Schritten in eine Richtung verschoben.
Wenn jemand jetzt ein bisschen "Herumkreiselt" oder ein liegendes U zieht, wird das natürlich auch als "wischen" gewertet.
Natürlich könnte man jetzt alle Zwischenstationen vergleichen und schauen, ob der Winkel zwischen den Punkten ähnlich ist und schauen ob die Richtung nicht weit aus der Horizontalen abweicht, aber das ist relativ aufwändig.

Ja, denke ich auch. Wenn du schon mit den Punkten der Geste hantierst, musst du wohl auch die Bewegung selbst verfolgen und die Bedeutung ermitteln. Wenn du das jemand anderem überlassen kannst und nur noch abfragen musst, was der Anwender wünscht - umso besser. Aber dann darf dich auch nicht mehr interessieren, wie der Wunsch geäußert wurde - ob Wisch oder Tipp oder Click ist dann egal.

Lo!

[suit]

Eigentlich sollte das auf einer höheren Ebene ausgewertet werden. Dein Script sollte nur das Blätter-Ereignis zu sehen bekommen. Dann bliebe es kompatibel zu allen Arten, seinen Blätter-Wunsch auszudrücken, nicht nur durch einen Wisch.

Darum auch meine Frage - aber ich finde hierzu nichts :)

Da gibt es doch einen Abschnitt "Using Gestures to Translate, Scale, and Rotate Elements". Der hilft auch nicht?

Prinzipiell ja, wenn ich denn nur wüsste, wie die Geste zu "Swype Horizontal" oder wie auch immer heisst :)

[flowh]

Hallo suit.

Vielleicht hilft dir jQTouch weiter.
Es gibt auch noch Alternativen, soweit ich weiß.

Servus,
Flo

[suit]

Vielleicht hilft dir jQTouch weiter.

Die Swype-Sache funktioniert weder am iPad, am iPad 2 noch auf Android unter Opera Mobile oder dem Built-In-Browser :)

Es gibt auch noch Alternativen, soweit ich weiß.

ja, jQuery Mobile - da verreckt aber permanent die Demos&Doku-Seite am iPad - noch nicht fertig :)

[molily]

Natürlich könnte man jetzt alle Zwischenstationen vergleichen und schauen, ob der Winkel zwischen den Punkten ähnlich ist und schauen ob die Richtung nicht weit aus der Horizontalen abweicht, aber das ist relativ aufwändig.

Ist es das? Du musst nicht alle Zwischenstationen vergleichen, sondern einfach die Geste als ungültig werten, sobald die horizontale Abweichung groß ist. Also in touchmove prüfen.

Ich denke, das ist der Weg, den du gehen muss, und letztlich der einfachste verglichen mit irgendwelchen generischen Bibliotheken.

Mathias

[suit]

Ist es das? Du musst nicht alle Zwischenstationen vergleichen, sondern einfach die Geste als ungültig werten, sobald die horizontale Abweichung groß ist. Also in touchmove prüfen.

Prinzipiell reicht mir das, ja - allerdings kann ich bei einem return false bzw. preventDefault() eben nicht unterscheiden, ob der Benutzer nicht wirklich eine andere geste machen wollte. Auch Multitouch-Gesten werden nicht erfasst, bei der man einen Punkt festhält und den anderen herumzieht, weil ich ja eben nur [0] auswerte, die anderen touches aber ignoriere.

Ich denke, das ist der Weg, den du gehen muss, und letztlich der einfachste verglichen mit irgendwelchen generischen Bibliotheken.

Ja, es funktioniert auch :) zudem ist das ohnehin ein Feature, das nur einem "eingeschränkten Benutzerkreis" zur Verfügung steht.