//터치 이벤트 예
    //웹 터치
     var y=0, last=0, bool=true;
        $(document).on("touchstart mousedown", function(e) {

            $(".touch-value-start").text("터치가 시작되었어요.");
          
//            e.preventDefault();        이벤트취소

        });

        $(document).on("touchmove ", function(e) {

            
            var event = e.originalEvent;

            $(".touch-text").text("touch 이벤트 중입니다."); 

            //  터치한 좌표값 넣기
            y=event.changedTouches[0].screenY;
            x=event.changedTouches[0].screenX;
            
            $(".y-move").text(y);
            $(".x-move").text(x);

                console.log(y);
                console.log(x);
                console.log("마지막 위치 : "+last);
            if(y>last ){
                console.log("올렸음 : "+y);
                 
                $(".footer-menu").stop().fadeOut();
                
                
            }else{
                console.log("내렸음 : "+y);
                 $(".footer-menu").stop().fadeIn();
                
                console.log("마지막 위치 : "+last);
            }
            last=y;
//             event.preventDefault();
            
        });

        $(document).on('touchend mouseup', function(e) {

            $(".touch-value-end").text("터치이벤트가 종료되었어요"); 

        });

        $(document).on("mousemove",function(event){
            $('.x-move').text( event.pageX);
            $('.y-move').text( event.pageY);
        });

데스크탑에서

mouseup,mousedown,mousemove

예제)

html

                <div class="scroll-x-hidden">
                    <nav class="top-menu">
                        <ul class="tmenu">
                            <li><a href="http://naver.com">목록1</a></li>
                            <li><a href="http://naver.com">목록2</a></li>
                            <li><a href="http://naver.com">목록3</a></li>
                            <li><a href="http://naver.com">목록4</a></li>
                            <li><a href="http://naver.com">목록5</a></li>
                            <li><a href="http://naver.com">목록6</a></li>
                            <li><a href="http://naver.com">목록7</a></li>
                            <li><a href="http://naver.com">목록8</a></li>
                        </ul>
                    </nav>
                </div>

css

.scroll-x-hidden{
    height:20px;
    overflow-y:hidden;
    float:left;
    
}
.top-menu{
    width:100%;
    border:none;
    float:left;
    overflow:auto;
    position:static;
    top:-100;
    z-index:99999;
    left:0;
    transition:0.5s;
    background:red;
}
.tmenu{
    width:150%;
    position:relative;
    left:0;
    top:0;
}
.tmenu>li{
    list-style:none;
    float:left;
    width:12.5%;
    border:1px solid #eeeeee;
    
    background:white;
    text-align:center;
}
.tmenu>li:first-child{
    border-left:none;
}
.tmenu>li:last-child{
    border-right:none;
}

js

 var draggable = false;
    var x = y =0;
    var pos_x = pos_y = 0;
    
    $(".tmenu").mousemove(function(e) {
        
        
            if(x<=-424){
                console.log("X : "+x+"끝");
                console.log("pos_x : "+pos_x);
                console.log("e.pageX : "+e.pageX);
                
                if(draggable ){
                    x=parseInt($(this).css("left"))+(pos_x-e.pageX);
                    pos_x=e.pageX;

                    $(this).css({
                        left:x
                    })
                    console.log("드레그 위치 : "+x);
                }
                draggable=false;
                
            }else{
                console.log("x : "+x+" last : "+last)
                if(draggable ){
                    if(x>=0){
                        $(this).css({
                            left:0
                        })
                    }
                    
                       x=parseInt($(this).css("left"))-(pos_x-e.pageX);
                        pos_x=e.pageX;

                        $(this).css({
                            left:x
                        })
                        console.log("드레그 위치 : "+x); 
  
                }
            }
 
        return false;
    });
    
    $(".top-menu").mousedown(function(e){
        pos_x=e.pageX;
        draggable=true;
        console.log("top-menu"+pos_x);
        console.log(draggable)
        return false;
        
    });
    
    $(".top-menu").mouseup(function(e){
        draggable=false;
        return false;
    });