$(function(){
var flag =0; //标记是拖曳还是点击
var oDiv =document.getElementById("assistiveTouch");
var disX,disY, moveX,moveY, L, T, starX, starY, starXEnd, starYEnd;
oDiv.addEventListener("touchstart", function(e) {
flag =0;
e.preventDefault(); //阻止触摸时页面的滚动,缩放
disX = e.touches[0].clientX -this.offsetLeft;
disY = e.touches[0].clientY -this.offsetTop;
//手指按下时的坐标
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
});
oDiv.addEventListener("touchmove", function(e) {
L = e.touches[0].clientX - disX;
T = e.touches[0].clientY - disY;
//移动时 当前位置与起始位置之间的差值
starXEnd = e.touches[0].clientX - starX;
starYEnd = e.touches[0].clientY - starY;
if((starXEnd >10 || starXEnd < -10) || (starYEnd >10 || starYEnd < -10)){
flag =1;
}
if (L <0) {//限制拖拽的X范围,不能拖出屏幕
L =0;
}else if (L >document.documentElement.clientWidth -this.offsetWidth) {
L =document.documentElement.clientWidth -this.offsetWidth;
}
if (T <0) {//限制拖拽的Y范围,不能拖出屏幕
T =0;
}else if (T >document.documentElement.clientHeight -this.offsetHeight) {
T =document.documentElement.clientHeight -this.offsetHeight;
}
moveX = L +"px";
moveY = T +"px";
this.style.left = moveX;
this.style.top = moveY;
});
oDiv.addEventListener("touchend", function(e) {
//判断滑动方向
if (flag ===0) {//点击
sHide();
}
});
function sHide() {
$('#maskdiv').show();
$('.navigation').show();
$('#assistiveTouch').hide();
};
});