美文网首页
移动端拖拽

移动端拖拽

作者: black白先森 | 来源:发表于2016-09-06 15:23 被阅读16次

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

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

    相关文章

      网友评论

          本文标题:移动端拖拽

          本文链接:https://www.haomeiwen.com/subject/rxvdettx.html