移动端拖拽

首先 html,body {height: 100%;width:100%;}

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"})
        }
    });

里面,我想通过状态判断,导航是否收起,收起才可以拖动。
最后发现判断状态不能在事件外面判断,因为外面只会判断一次,只有放在事件里面才会一直判断,生效

你可能感兴趣的:(移动端拖拽)