touchstart, touchend 이벤트 이용해서 스와이프처럼 보여지기

반응형 모바일 개발을 하다가 화면에서 화살표 외 컨텐츠 내용 부분을
스와이프 할 경우 좌우로 움직일 수 있도록 하는 부분에 대한 내용이 필요해서 정리.

<div>
  <div class="pop_bg"></div>
  <div class="pop_wrapn"></div>
</div>

위에 div영역도 상세한 내용은 제외하고, 간단히 아래 js에서 사용하는 부분에 대해 구조만 확인할 수 있도록 작성했다.

var fn_open = function() {
	// 팝업열기
};

var fn_close = function() {
	// 팝업 닫기
};

var fn_getPrev = function() {
	// 이전 내용
};

var fn_getNext = function() {
	// 다음 내용
};

$(document).ready(function(){
	$('.pop_area').on('touchstart', function() {
    	// 처음 터치한 영역의 X,Y 좌표
		startX = event.touches[0].pageX;
		startY = event.touches[0].pageY;
		console.log('startX :: ' + startX);
		console.log('startY :: ' + startY);
	});

	$('.pop_area').on('touchend', function() {
    	// 마지막 터치한 영역의 X,Y 좌표
		endX = event.changedTouches[0].pageX;
		endY = event.changedTouches[0].pageY;
		console.log('endX :: ' + endX);
		console.log('endY :: ' + endY);

		if (startX > endX) {
        	// 오른쪽에서 왼쪽으로 스와이프
			fn_getNext();
		} else if (startX < endX) {
        	// 왼쪽에서 오른쪽으로 스와이프
			fn_getPrev();
		} else {
        	// X 좌표 시작과 끝이 같을 때
        }

		console.log(Number(startY) - Number(endY));
		if (startY < endY && (Number(endY) - Number(startY)) > 50) {
        	// 위에서 아래로 스와이프
            // 범위가 너무 작을 경우 좌우로 움직이면서 Y값이 달라질 수 있으므로
            // 임의로 50의 값을 줌
			fn_close();
		}
	});

	$('.pop_bg').on('touchmove', function() {
    	// 팝업 화면 외 배경에서 행동이 일었을 경우
		fn_close();
	});
});

위의 내용만 보면 간단하긴 한데, 그래도 한 번 정리해두는 편이 좋을 것 같아서 각 함수 안에 소스는 지우고 올린다.

모바일의 경우 애니메이션 효과를 주는 경우가 많기 때문에 스와이프도 당연히 될거라고 생각하는 경우가 많아서
두가지가 함께 진행이 되는 경우가 많은 것 같다.