jQuery touchSwipe 플러그인

모바일 쇼핑몰에서 사용할 swipe 플러그인을 찾아보니 jQuery touchSwipe라는 플러그인을 찾게 됐다. 다른 플러그인들에 비해서 용량은 좀 크지만 터치시 움직일 때마다 실시간으로 움직인 거리 등의 정보를 얻을 수 있는 점이 마음에 들어서 사용해보려 한다. 아직 테스트를 진행하고 있지만 괜찮은 플러그인인 것 같다.

$("#touch").swipe({
    swipe: function(event, direction, distance, duration, fingerCount) {
        switch(direction) {
            case "left":
                alert("left");
                break;
            case "right":
                alert("right");
                break;           
        }        
    }
});

기본적으로 위와같은 방법으로 사용할 수 있다. 이렇게 사용했을 때 기본적으로 #touch 엘리먼트의 자식 엘리먼트 중 input, a 등의 엘리먼트는 이벤트에서 제외되도록 설정되어 있다. 그래서 이벤트가 발생하지 않아 처음에 엄청 당황스러웠는데 excludedElements:”.noSwipe” 와 같이 제외되는 엘리먼트를 재설정 해주면 된다.

$("#touch").swipe({
    swipe: function(event, direction, distance, duration, fingerCount) {
        switch(direction) {
            case "left":
                alert("left");
                break;
            case "right":
                alert("right");
                break;           
        },
        threshold: 0,
        excludedElements:".noSwipe",
        allowPageScroll:"vertical"
    }
});

위 코드는 제외되는 엘리먼트 재설정과 세로 스크롤을 허용하는 부분이 추가되어 있다. 아래 첨부 파일은 1.6.5 버전의 압축 파일이다.

jquery.touchSwipe.zip