正在回答
4回答
同学你好，关于同学的问题解答如下：
1、第一个原因是使用定位的left、top设置距离，会影响盒子移动距离的计算，检测结果如下：
因此，建议使用translate3d()来设置盒子距离左侧和上方的距离，参考代码：
2、js代码中缺少对边界控制的代码，参考如下：
3、下列代码可以进行优化，建议参考：
如果我的回答帮助了你，希望采纳，祝学习愉快~
慕言_7946275
2019-11-13 19:41:26
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>单指拖拽运动练习</title>
<style>
body{
height: 2000px;
background-color: pink;
}
.box{
position: absolute;
top:20px;
left:20px;
width: 50px;
height: 50px;
background-color: #f14f14;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var box=document.getElementById("box");
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;
var curPoint={
x:0,
y:0
};
var startPoint={};
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){
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;
var touch=ev.changedTouches[0];
curPoint.x+=touch.pageX-startPoint.x;
curPoint.y+=touch.pageY-startPoint.y;
isTouchMove=false;
}
console.log(el.parentNode.offsetHeight);
console.log(el.offsetHeight);
var maxWidth=el.parentNode.offsetWidth-el.offsetWidth-20;
var maxHeight=el.parentNode.offsetHeight-el.offsetHeight-20;
function move(el,x,y){
if(x<0){
x=0;
}else if(x>maxWidth){
x=maxWidth;
}
if(y<0){
y=0;
}else if(y>maxHeight){
y=maxHeight;
}
el.style.transform='translate3d(' +x+ 'px,' +y+'px,0)';
}
}
drag(box,{
x:true,
y:true
});
</script>
</body>
</html>上下左右距离边界都还有20px,不能完全到达边界,问题在哪老师
慕言_7946275
2019-11-13 18:06:30
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>单指拖拽运动练习</title>
<style>
body{
height: 2000px;
background-color: pink;
}
.box{
position: fixed;
top:20px;
left:20px;
width: 50px;
height: 50px;
background-color: #f14f14;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
function drag(el,options){
options.x=typeof options.x!==undefined?options.x:true;
options.y=typeof options.x!==undefined?options.x:false;
if(!options.x && options.y) return;
var curPoint={
x:0,
y:0
}
var startPoint={};
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){
var touch=ev.changedTouches[0];
ev.preventDefault();
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;
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 box=document.getElementById("box");
drag(box,{
x:true,
y:true
});
</script>
</body>
</html>相似问题
登录后可查看更多问答，登录/注册
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星