js 拖动盒子 (手机版)
程序员文章站
2024-01-29 12:54:04
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 3000px;
}
div {
position: relative;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 拖动元素三部曲:
// 1.触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
// 2.移动手指touchmove:计算手指的滑动距离,并且移动盒子
// 3.离开手指touchend
var div = document.querySelector('div');
var startX = 0; //获得手指初始坐标
var startY = 0;
var x = 0; //获得盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
})
div.addEventListener('touchmove', function (e) {
//计算手指的移动距离:手指移动后的坐标减去初始坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
//移动盒子:盒子原来的位置+手指移动的距离
this.style.left = x + moveX + 'px';
console.log(div.style.left)
this.style.top = y + moveY + 'px';
// 因为手指移动屏幕也会移动,所以阻止屏幕滚动的默认行为
e.preventDefault()
})
div.addEventListener('touchend', function (e) {
})
</script>
</body>
</html>