이동단 드래그

var maxW = document.body.clientWidth-$(".j-btn-nav").width();
    var maxH = document.body.clientHeight-$(".j-btn-nav").height();
    //  
    $(".j-btn-nav").on("touchstart",function(e){
        if($(this).attr("data-id") == 1){
            var ev = e || window.event;
            var touch = ev.targetTouches[0];
            oL = touch.clientX - $(this).offset().left;
            //   clientX     top , pageY  oT 
            oT = touch.pageY - $(this).offset().top; 
        }else{
            return;
        }
    });
    //  
    $(".j-btn-nav").on("touchmove",function(e){
        e.preventDefault();// ， 
        if($(this).attr("data-id")==1){
               var ev = e || window.event;
               var touch = ev.targetTouches[0];
               var oLeft = touch.clientX - oL;
               var oTop = touch.clientY - oT;
               //    
               if(oLeft<0){
                   oLeft=0;
               }else if (oLeft>=maxW) {
                   oLeft=maxW;
               }
               //      
               if(oTop<0){
                   oTop=0;
               }else if (oTop>=maxH){ //  
                   oTop=maxH;
               }
               //  
                $(this).css({
                    "left": oLeft,
                    "top": oTop
               });
        }else{
            return ;
        }
    });
    //  
    $(".j-btn-nav").on("touchend",function(e){
        //  
        if($(this).offset().left == 0){
            $(this).addClass("cur").animate({"left": "-2.6rem"})
        }else if($(this).offset().left == maxW){
            $(this).addClass("cur").animate({"left":"25rem"})
        }
        //  
        if($(this).offset().top == 0){
            //$(this).addClass("cur").animate({"top": "-2.6rem"})
        }else if($(this).offset().top == maxH){
            //$(this).addClass("cur").animate({"top": "38rem"})
        }
    });