Как с помощью свайпа добавлять/удалять классы?

172

22 июля 2019, 00:10

Подскажите пожалуйста как на сенсорных экранах с помощью свайпа добавлять/удалять классы, например если двигаешь пальцем слева-на-право - добавить класc.Справа-на-лево - удалить.

Answer 1

Возьмем за основу вот этот код , и добавим логику изменения классов

document.addEventListener('touchstart', handleTouchStart, false);         
document.addEventListener('touchmove', handleTouchMove, false); 
 
var xDown = null;                                                         
var yDown = null; 
 
function getTouches(evt) { 
  return evt.touches ||             // browser API 
         evt.originalEvent.touches; // jQuery 
}                                                      
 
function handleTouchStart(evt) { 
    const firstTouch = getTouches(evt)[0];                                       
    xDown = firstTouch.clientX;                                       
    yDown = firstTouch.clientY;      
     
    //Убираем классы 
    test.classList.remove('left'); 
    test.classList.remove('right'); 
};                                                 
 
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 */  
            //Добавляем класс 
            test.classList.add('left'); 
        } else { 
            /* right swipe */ 
            //Добавляем класс 
            test.classList.add('right'); 
        }                        
    } else { 
        if ( yDiff > 0 ) { 
            /* up swipe */ 
        } else {  
            /* down swipe */ 
        }                                                                  
    } 
    /* reset values */ 
    xDown = null; 
    yDown = null;                                              
}; 
 
var test = document.querySelector('.js-test');

.js-test { 
  width: 100px; 
  height: 100px; 
  background-color: red; 
} 
 
.js-test.left { 
  background-color: green; 
} 
 
.js-test.right { 
  background-color: blue; 
}