为什么我没实现拖动？也没报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.backTop {
width: 45px;
height: 45px;
background-color: rgba(2, 2, 2, .5);
border-radius: 50%;
position: fixed;
bottom: 20px;
right: 20px;
text-align: center;
color: #ffffff;
line-height: 45px;
font-size: 20px;
}
</style>
</head>
<body>
<a class="backTop" id="backTop">↑</a>
<script>
function drag(el, option) {
option.x = typeof option.x !== 'undefined' ? option.x : true;
option.y = typeof option.y !== 'undefined' ? option.y : false;
if (!option.x && !option.y) return;
var startPoint = {}, curPoint = { x: 0, y: 0 };
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);
el.addEventListener("touchend", handleEnd, false);
function handleStart(e) {
var touch = e.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}
function handleMove(e) {
e.preventDefault();
var touch = e.changedTouches[0];
var diffPoint = {}, movePoint = {};
diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
if (option.x) {
movePoint.x = diffPoint.x + curPoint.x
};
if (option.y) {
movePoint.y = diffPoint.y + curPoint.y
}
move(el, movePoint.x, movePoint.y);
}
function handleEnd(e){
var touch = e.changedTouches[0];
curPoint.x = touch.pageX - startPoint.x;
curPoint.y = touch.pageY - startPoint.y;
}
function move(el, x, y) {
x = x || 0;
y = y || 0;
el.transform = 'translate3d (' + x + 'px, ' + y + 'px, 0)'
}
}
var backTop = document.getElementById("backTop");
drag(backTop, { x: true, y: true });
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星