元素碰到边界就不动了怎么实现呢，自己用给加条件判断的方法好像不行，
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: pink;
height: 1000px;
}
.box {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
let box = document.getElementById('box');
let screenWidth = document.documentElement.clientWidth
console.log(screenWidth);
drag(box, {
x: true,
y: true
})
function drag(el, opation) {
opation.x = typeof opation.x !== undefined ? opation.x : true;
opation.y = typeof opation.y !== undefined ? opation.x : true;
if (!opation.x && !opation.y) return;
// 更新后坐标
let curPoint = {
x: 0,
y: 0
}
// 手指按下时坐标
let startPoint = {};
el.addEventListener('touchstart', function(e) {
let touch = e.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
// console.log(startPoint.x, startPoint.y);
}, false)
el.addEventListener('touchmove', function(e) {
e.preventDefault()
let touch = e.changedTouches[0];
// 滑动后与开始按下的距离+原来坐标的距离
let juli = {};
juli.x = touch.pageX - startPoint.x + curPoint.x;
juli.y = touch.pageY - startPoint.y + curPoint.y;
// if ((juli.x >= 0 && juli.x <= 375) && (juli.y >= 0 && juli.y <= 1000)) {
// } else {
// console.log('超出范围了');
// }
move(el, juli.x, juli.y)
}, false)
el.addEventListener('touchend', function(e) {
let touch = e.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
}, false)
}
function move(elm, x, y) {
elm.style.transform = `translate3d(${x}px,${y}px,0)`
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，对于你的问题解答如下：
1、因为元素碰到右侧边界就不动了，那么元素能够移动的最大距离就是页面的宽度减去盒子的宽度，所以判断判断盒子移动的距离大于等于这个最大距离时，盒子就不能够继续往右移动了，此时将最大距离赋值给juli.x，那么就实现了即使继续往右拖动元素，元素也不会超出界限了，可以结合下图理解：
2、如果不做限制，juli.x = 0确实可以理解为元素没有动，刚好在左侧边界上，但是当你继续往左拖动元素时，那么juli.x就会变成赋值，导致盒子超出左侧边界，所以想要元素碰到左侧的边界就不动了，那么元素能够移动的最小距离就是0，所以判断盒子移动的距离是否小于等于0时，盒子就不能够继续往左移动了，此时将最小距离赋值给juli.x， 那么就实现了即使继续往左拖动元素，元素也不能够超出界限了。
垂直方向是同样的思路，参考水平方向的解析理解即可。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星