参考了网上的文章，然后又完善了一下
大概思路：
1、实现页面的拖动效果：首先是明白移动端的touchstart touchmove touchend的用法
2、div移动其实就是它的left 和 top 的移动
3、touchstart 的时候，记录鼠标的坐标和div的偏移量，由此可以计算出鼠标和div左侧和顶部的距离
4、touchmove 的时候，记录新的鼠标坐标，用新的坐标-起点鼠标和偏移量的差值=div需要移动的距离
5、边界值限制，防止div 移出来
6、禁止底层滑动
7、跳转到首页或者百度
我的w3cfuns 同篇文章http://www.qdfuns.com/notes/19055/1b91973818e1014978641524cbe3f215.html
dragFn('div1','http://www.baidu.com');
function dragFn(id,path){
var dom = document.getElementById(id);
var flag = false;
var cur = {
x:0,
y:0
}
var skip = 0;
var nx,ny,dx,dy,x,y;
function down(){
flag = true;
var touch;
if(event.touches){
touch = event.touches[0];
}else{
touch = event;
}
cur.x = touch.clientX; // 获取当点鼠标的坐标
cur.y = touch.clientY;
dx = dom.offsetLeft; // 当前元素距离外层元素的位置
dy = dom.offsetTop;
}
function move(){
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等
if(flag){
skip = 1;
var touch;
if(event.touches){
touch = event.touches[0];
}else{
touch = event;
}
nx = touch.clientX - cur.x; // 两个鼠标点的距离
ny = touch.clientY - cur.y;
x = dx + nx;
y = dy + ny;
if(x < 0){
x = 0
}else if(x > document.documentElement.clientWidth - dom.offsetWidth){
x = document.documentElement.clientWidth - dom.offsetWidth
}
if(y < 0){
y = 0
}else if(y > document.documentElement.clientHeight - dom.offsetHeight){
y = document.documentElement.clientHeight - dom.offsetHeight
}
dom.style.left = x +'px';
dom.style.top = y +'px';
return;
}
}
// 鼠标释放时候的函数
function end(){
flag = false;
move();
if(skip == 0){ // 判断是否出发了touchmove
location.href = path;
}
}
dom.addEventListener('touchstart',function(){
skip = 0;
down();
},false)
dom.addEventListener('touchmove',function(){
move();
},false)
dom.addEventListener('touchend',function(){
end();
},false)
}
网友评论