首先 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"})
}
});
里面,我想通过状态判断,导航是否收起,收起才可以拖动。
最后发现判断状态不能在事件外面判断,因为外面只会判断一次,只有放在事件里面才会一直判断,生效