4

Como no javascript/jquery saber para qual direção esta o touchmove ?

Exemplo:

    var ts;
    $(document).bind('touchstart', function(e) {
    ts = e.originalEvent.touches[0].clientY;
    });

    $(document).bind('touchmove', function(e) {
    var te = e.originalEvent.changedTouches[0].clientY;
    if (ts > te) {
    //cima
    } else {
    //baixo
    }
    });

Agora falta esquerda e direita...

1 Resposta 1

5

Para saber a diferença na horizontal e na vertical, você deve trabalhar nos eixos X e Y. Seria assim se fossemos usar a lógica do seu código.

var ts_x;
var ts_y;
$(document).bind('touchstart', function(e) {
   ts_x = e.originalEvent.touches[0].clientX;
   ts_y = e.originalEvent.touches[0].clientY;
});
$(document).bind('touchend', function(e) {
   var td_x = e.originalEvent.changedTouches[0].clientX - ts_x;
   var td_y = e.originalEvent.changedTouches[0].clientY - ts_y;
   // O movimento principal foi vertical ou horizontal?
   if( Math.abs( td_x ) > Math.abs( td_y ) ) {
      // é horizontal
      if( td_x < 0 ) {
         // esquerda
      } else {
         // direita
      }
   } else {
      // é vertical
      if( td_y < 0 ) {
         // cima
      } else {
         // baixo
      }
 });

Segue um código em JS puro, usando as propriedades originais do evento, pageX e pageY:

var ts_x;
var ts_y;
document.addEventListener('touchstart', function(e) {
   e.preventDefault();
   var touch = e.changedTouches[0];
   ts_x = touch.pageX;
   ts_y = touch.pageY;
}, false);

document.addEventListener('touchmove', function(e) {
   e.preventDefault();
   var touch = e.changedTouches[0];
   td_x = touch.pageX - ts_x; // deslocamento na horizontal
   td_y = touch.pageY - ts_y; // deslocamento na vertical
   // O movimento principal foi vertical ou horizontal?
   if( Math.abs( td_x ) > Math.abs( td_y ) ) {
      // é horizontal
      if( td_x < 0 ) {
         // é para esquerda
      } else {
         // direita
      }
   } else {
      // é vertical
      if( td_y < 0 ) {
         // cima
      } else {
         // baixo
      }
   }
}, false);

Para incrementar o código, você pode checar se o movimento passou de uma determinada distância, para ignorar toques na tela adicionando algo deste tipo:

 if( Math.max( Math.abs( td_x ), Math.abs( td_y ) ) > 10 ...

Nota: usei o evento touchend no lugar do touchmove. Veja qual é o mais adequado para o uso final. O end só é disparado ao encerrar o movimento, o move pode ser acionado uma série de vezes durante o "arrastar".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .