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