Как на нативном javascript реализовать swipe?

Question

[krll-k]

Бьюсь над тем что не знаю как вычеслить абсолютно относительный сдвиг(newX,newY):

document.body.addEventLestener("touchmove",function(e){
  if(event.targetTouches.length==1){
    var touch = event.targetTouches[0];
    var x = touch.pageX, y = touch.pageY;
    var newX = ???, newY = ???;
    if(x-newX <= y-newY) ...
  }
},false);

Думал как попробовать решить:
1) из переменных x и y сделать константы(const), а далее устоновить таймер, сравнить с newX и newY. Верно?

Comments

[Сергей Протько]

вы в контексте обучения интересуетесь? Ибо если вы это будете использовать на реальном проекте то лучше взять hummer.js?

[krll-k]

Сергей Протько: я просто хочу понять как без touchend сделать свайп, то как с ним я знаю

[sqr_behr]

krll-k: а вы не могли бы пояснить как это делается с touchend? Столкнулся с проблемой, где не обойтись без отключения стандартного функционала эвента через event.PreventDefault() - после этого приходится писать скролл по тач-жесту.

Answer 1

[wimanen]

Надо добавить не только touchmove, но и touchstart и touchend.
Если смотреть только по оси Х, то

var touchStart=  -1,
        touchEnd= -1,
        count= 0,
        targetElem= document.getElementById('some_element');

В touchstart функции берем координаты начала движения:

function tStart(e){
          e = e ? e : window.event;
          e = ('changedTouches' in e)?e.changedTouches[0] : e;
          touchStart = e.pageX;
       }

По ходу движения touchmove:

function tMove(e){
          e = e ? e : window.event;
          e = ('changedTouches' in e)?e.changedTouches[0] : e;
          touchEnd = e.pageX - touchStart;
          var _count = count -touchEnd;
          targetElem.style.transform = 'translateX('+(-_count)+'px)';
       }

Ну и в по окончании движения touchend:

function tEnd(e){
          count = count - touchEnd;
          targetElem.style.transform = 'translateX('+(-count)+'px)'; 
       }

Мы берем начальные значения, по ходу движения двигаем по нашей Х оси элемент, по окончании движения "сохраняем результат".

p.s. Не претендую на истину, конечно умные люди и более элегантно может напишут =))