<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>2-5单指拖拽</title>
<style>
body{
height: 2000px;
}
.backtop{
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
background-color: rgba(0,0,0,0.6);
border-radius: 50%;
color: #fff;
font-size: 30px;
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<a href="#" id="backtop" class="backtop">↑</a>
<script>
/* diffPoint是和startPoint一个差值，就是移动后和初始值的差值
movePoint是为move函数使用的，表示计算好的移动距离 */
function drag(el,options){
options.x = typeof options.x !== 'undefined' ? options.x : true;
options.y = typeof options.y !== 'undefined' ? options.y :false;
if(!options.x && !options.y) return; //如果禁止了x轴和y轴拖动,返回.
var curPoint = {
x:0,
y:0
};
var startPoint = {};
//move了才触发end,否则不触发end事件
var isTouchMove = false;
el.addEventListener('touchstart',handleStart,false);
el.addEventListener('touchmove',handleMove,false);
el.addEventListener('touchend',handleEnd,false);
function handleStart(ev){
var touch = ev.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}
function handleMove(ev){
//阻止有滚动条的默认行为,也可以在touchstart里面写
ev.preventDefault();
isTouchMove = true;
var touch = ev.changedTouches[0];
var diffPoint = {};
var movePoint = {
x:0,
y:0
};
diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
if(options.x){
movePoint.x = diffPoint.x + curPoint.x;
}
if(options.y){
movePoint.y = diffPoint.y + curPoint.y;
}
move(el,movePoint.x,movePoint.y);
}
function handleEnd(ev){
if(!isTouchMove) return;
//手指抬起时更新curPoint
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
function move(el,x,y){
x = x||0;
y = y||0;
el.style.transform = 'translate3d(' +x+ 'px,' +y+ 'px,0)';
}
}
</script>
<script>
var backtop = document.getElementById('backtop');
drag(backtop,{
x:true, //表示x轴可以拖动
y:true //表示y轴可以拖动
});
/* var curPoint = {
x:0,
y:0
}
backtop.addEventListener('click',function(){
move(this,-10+curPoint.x,-10+curPoint.y);
curPoint.x += -10;
curPoint.y += -10;
},false);
function move(el,x,y){
x = x || 0;
y = y || 0;
el.style.transform = 'translate3d('+x+'px, '+y+'px,0)'
} */
</script>
</body>
</html>
