Как отследить движение пальцем по сенсору?

Question

[qwerty12ss]

1. Здравствуйте, какой метод нужно использовать, для отслеживания движений по сенсору, мне нужно что бы при движении вбок слайдер перемещался на один блок.
2. И, если есть простое решение, как сделать так, что бы количество перелистываний зависимо от скорости движения?

Напишите пожалуйста на нативном js и на jquery

Comments

[Павел Корнилов]

Чего? Напишите?

[qwerty12ss]

KorniloFF, я имел ввиду, написать как это будет на и на jq и на js, я не имел ввиду написать слайдер полностью)

[Павел Корнилов]

qwerty12ss, да ладно, спишем на неточность формулировки.
Я дал ответ ниже. который можно использовать как в нативном JS, так и в jQ. Но нужно помнить, что в jQ - свой объект события. Там нужно использовать e.originalEvent

Answer 1

[Павел Корнилов]

1. Нужно получить координаты пальца в моменты касания / отрыва. Функция ниже - в помощь

// e - объект события touchstart / touchend
function getTouch(e) {
	return {
		get x() {
			return e.changedTouches[0].pageX
			},
		get y() {
			return e.changedTouches[0].pageY
		}
	}
}

2. Арифметически вычислить направление движения пальца по полученным координатам.

Answer 2

[GreatRash]

1. получить координаты тача при touchstart
2. получить текущее время тача при touchstart (Date.now())
3. получить координаты тача при touchend
4. получить текущее время при touchend
5. из конечных координат вычесть начальные - таким образом получить вектор направления свайпа
6. из конечного времени вычесть начальное - таким образом получить время свайпа
7. формула скорости: v = ds/dt
8. ds (дельта расстояния) - это длина вектора из шага 5, находится по формуле Math.sqrt(x*x + y*y)
9. dt (дельта времени) - мы её уже нашли на шаге 6
10. если скорость большая, то пролистываем много
11. если скорость маленькая, то пролистываем мало