仿苹果返回首页按钮(移动端div拖动 返回首页)

参考了网上的文章，然后又完善了一下

大概思路：

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)

}