swipe смахивание на JavaScript

JavaScript — как обработать событие «смахивание» (swipe) в мобильной версии как в Тиндер

Многим разработчикам на JS необходимо реализовать в своих проектах жесть «смахивание», так, как реализовано в Tinder. Например, для тех же целей — жест влево означает, что картинка «не нравится», жест вправо — наоборот, «нравится».

Хотя некоторые злые языки  утверждают, что разработчикам достаточно было бы реализовать только свайп вправо. Ведь некоторые пользователи принципиально не используют жест влево, потому что таким образом шансы на встречу значительно повышаются. А они зависят от взаимности.

Но речь не о том. Речь о разработке на JavaScript. Каким образом можно встроить на свою страничку обработчик на JS, отлавливающие движения пальцем влево-вправо. А заодно вверх-вниз. Заставлять пользователей жать на телефоне значочки в 2020-х годах — слишком уж.

Подробности реализации

Можно было бы написать код на jQuery, но это совершенно не нужно. Причина — библиотека в 20х годах сильно сдала. Потому что нативный JavaScript стал очень мощный и в нем появились все необходимые функции.

Руководство Firefox, которое я очень рекомендую, и которое позволяет создавать код для любых других браузеров (в том числе и для любимого многим Chrome), подсказывает нам следующее:

Можно использовать события Touch, специфичные для сенсорных экранов. И отлавливать начало и конец движения.

Я знаю, вы пришли сюда за кодом, поэтому вот он (спасибо стэковерфлоу и всем тем, кто там пишет):

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
 
function getTouches(evt) {
return evt.touches || // чистый API JS
evt.originalEvent.touches; // jQuery
}
 
function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.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 ) ) {/* отлавливаем разницу в движении */
if ( xDiff > 0 ) {
/* swipe влево */
} else {
/* swipe вправо */
}
} else {
if ( yDiff > 0 ) {
/* swipe вверх */
} else {
/* swipe вниз */
}
}
/* свайп был, обнуляем координаты */
xDown = null;
yDown = null;
};

2 комментария

  • Andres

    15.10.2021

    +

    Reply

  • ArhDaRk

    22.04.2022

    //Для того, что бы это работало пришлось немного переделать

    document.addEventListener(‘touchstart’, handleTouchStart, false);
    document.addEventListener(‘touchmove’, handleTouchMove, false);
    var xDown = null;
    var yDown = null;

    function getTouches(evt) {
    return evt.touches
    };

    function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];
    xDown = firstTouch.clientX;
    yDown = firstTouch.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)) {
    ( xDiff > 0 ) ? alert(«Left») : alert(«Right»);
    }
    if ( Math.abs(xDiff) 0 ) ? alert(«Up») : alert(«Duwn»);
    }
    /* свайп был, обнуляем координаты */
    xDown = null;
    yDown = null;
    };

    Reply

Добавить комментарий