老师请解答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body style="height: 2000px">
<div class="box" id="box"></div>
<script>
const drag = EL => {
const startPoint = {}; // 每次拖拽最开始的触摸点
const movePoint = {}; // 拖拽过程中移动的点
const curPos = {
// 被拖拽元素的当前位置
x: 0,
y: 0,
};
EL.addEventListener("pointerdown", startHandler, false);
EL.addEventListener("pointermove", moveHandler, false);
EL.addEventListener("pointerup", endHandler, false);
EL.addEventListener("pointercancel", endHandler, false);
function startHandler(e) {
e.preventDefault();
startPoint.x = e.pageX;
startPoint.y = e.pageY;
}
function moveHandler(e) {
movePoint.x = curPos.x + e.pageX - startPoint.x;
movePoint.y = curPos.y + e.pageY - startPoint.y;
EL.style.transform = `translate3d(${movePoint.x}px, ${movePoint.y}px, 0)`;
}
function endHandler() {
curPos.x = movePoint.x;
curPos.y = movePoint.y;
}
};
drag(document.getElementById("box"));
</script>
</body>
</html>
11
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星