首先 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;
}
});
// 移動(dòng)
$(".j-btn-nav").on("touchmove",function(e){
e.preventDefault();//阻止觸摸時(shí)頁面的滾動(dòng)，縮放
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 ;
}
});
// 結(jié)束
$(".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"})
}
});
里面叛溢，我想通過狀態(tài)判斷塑悼，導(dǎo)航是否收起，收起才可以拖動(dòng)楷掉。
最后發(fā)現(xiàn)判斷狀態(tài)不能在事件外面判斷厢蒜，因?yàn)橥饷嬷粫?huì)判斷一次，只有放在事件里面才會(huì)一直判斷烹植，生效
