javascript - eventos - ¿Cómo implementar gestos de deslizamiento para dispositivos móviles?

touch events html

Question

Tengo una aplicación hecha en AngularJS que tiene navegación con la tecla de flecha para cambiar de vista.

Quiero implementar esta navegación con deslizar para dispositivos táctiles. Intenté la biblioteca de jGestures pero no funciona bien con deslizar. Se me recomendó NO usar jquery mobile .

¿Hay alguna otra forma de implementar el deslizamiento?

EDITAR: no detecta el deslizamiento limpiamente. Lo probé en múltiples dispositivos, incluido iPad, y se necesitan varios golpes para realizar una acción (enrutamiento en mi caso).

Answer 1

¡Hora del martillo!

He usado Hammer JS y funciona con gestos. Lea los detalles de aquí: https://hammerjs.github.io/

Lo bueno es que es mucho más ligero y rápido que el móvil jQuery. Puedes probarlo en su sitio web también.

Answer 2

¿Has probado Hammerjs? Admite movimientos de deslizamiento usando la velocidad del toque. http://eightmedia.github.com/hammer.js/

Answer 3

Hice esta función para mis necesidades.

Sientase libre de usarlo. Funciona muy bien en dispositivos móviles.

function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
var min_x = 30; //min x swipe for horizontal swipe
var max_x = 30; //max x difference for vertical swipe
var min_y = 50; //min y swipe for vertical swipe
var max_y = 60; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener(''touchstart'',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener(''touchmove'',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener(''touchend'',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == ''function'') func(el,direc);
}
direc = "";
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
},false);
}
function myfunction(el,d) {
alert("you swiped on element with id ''"+el+"'' to "+d+" direction");
}

Para usar la función simplemente utilícela como

detectswipe(''an_element_id'',myfunction);
detectswipe(''an_other_element_id'',my_other_function);

Si se detecta un deslizamiento, se llama a la función "myfunction" con el parámetro element-id y "l, r, u, d" (izquierda, derecha, arriba, abajo).

Ejemplo: http://jsfiddle.net/rvuayqeo/1/

Answer 4

La solución más simple que he encontrado que no requiere un complemento es la respuesta de givanse a una pregunta similar:

document.addEventListener(''touchstart'', handleTouchStart, false);
document.addEventListener(''touchmove'', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};

Answer 5

Me gusta su solución y la implementé en mi sitio, sin embargo, con algunas pequeñas mejoras. Solo quería compartir mi código:

function detectSwipe(id, f) {
var detect = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
minX: 30, // min X swipe for horizontal swipe
maxX: 30, // max X difference for vertical swipe
minY: 50, // min Y swipe for vertial swipe
maxY: 60 // max Y difference for horizontal swipe
},
direction = null,
element = document.getElementById(id);
element.addEventListener(''touchstart'', function (event) {
var touch = event.touches[0];
detect.startX = touch.screenX;
detect.startY = touch.screenY;
});
element.addEventListener(''touchmove'', function (event) {
event.preventDefault();
var touch = event.touches[0];
detect.endX = touch.screenX;
detect.endY = touch.screenY;
});
element.addEventListener(''touchend'', function (event) {
if (
// Horizontal move.
(Math.abs(detect.endX - detect.startX) > detect.minX)
&& (Math.abs(detect.endY - detect.startY) < detect.maxY)
) {
direction = (detect.endX > detect.startX) ? ''right'' : ''left'';
} else if (
// Vertical move.
(Math.abs(detect.endY - detect.startY) > detect.minY)
&& (Math.abs(detect.endX - detect.startX) < detect.maxX)
) {
direction = (detect.endY > detect.startY) ? ''down'' : ''up'';
}
if ((direction !== null) && (typeof f === ''function'')) {
f(element, direction);
}
});
}

Úselo como:

detectSwipe(''an_element_id'', myfunction);

O

detectSwipe(''another_element_id'', my_other_function);

Si se detecta un deslizamiento, la función myfunction se llama con el parámetro element-id y ''left'' , ''right'' , ''up'' oder ''down'' .

Answer 6

Plug Shameless, lo sé, pero es posible que desee considerar un plugin jQuery que escribí:

https://github.com/benmajor/jQuery-Mobile-Events

No requiere jQuery Mobile, solo jQuery.

Answer 7

También hay un módulo AngularJS llamado angular-gestures que se basa en hammer.js: https://github.com/wzr1337/angular-gestures