老师，请检查代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>return</title>
<!-- 1、给body设置固定高度和背景颜色
2、添加块元素设置样式并通过js获取块元素
3、定义一个drag方法，方法中有两个参数，一个参数是拖拽的对象，另一个参数是是否允许拖拽
4、对元素绑定touch事件，可以通过触摸位置的pageX和pageY来计算元素拖拽的位置
5、可以使用transform中的translate3d()样式来改变元素移动的位置
-->
<!-- 6、元素移动到边界的时候需要添加限制条件，不允许超出边 -->
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: pink;
height: 2000px;
}
div{
background-color: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="divv"></div>
<script>
// 获取到要操作的元素
var divv=document.getElementById('divv');
// 封装一个drag函数，传递元素以及移动的x.y坐标的值
drag(divv,{
x:true,
y:true
})
// 封装一个drag函数
function drag(el,option){
option.x=typeof option.x!=='undefined' ? option.x:true;
option.y=typeof optiony!=='undefined' ? option.y:true;
if (!option.x&&!option.y) return;
// 存放开始的值
var star={};
// 存放当前的值
var cur={
x:0,
y:0
};
// 存放移动的位置
var mm={};
var cliwidth=document.body.clientWidth;
var cliheight=document.body.clientHeight;
var boxW=divv.offsetWidth;
var boxH=divv.offsetHeight;
console.log(cliwidth,boxW);
// 移动开关默认不移动
var isTouchMove=false;
el.addEventListener('touchstart',start,false);
el.addEventListener('touchmove',move,false);
el.addEventListener('touchend',end,false);
function start(ev){
var touch=ev.changedTouches[0];
// 把当前点击位置赋值给开始位置
star.x=touch.pageX;
star.y=touch.pageY;
console.log('开始：'+star.x,star.y);
}
function move(ev){
ev.preventDefault();
isTouchMove=true;
var touch=ev.changedTouches[0];
// 存放当前位置减去开始位置的差值
var chazhi={};
// 当前位置减去开始位置的差值
chazhi.x=touch.pageX-star.x;
chazhi.y=touch.pageY-star.y;
console.log('当前'+touch.pageX,touch.pageY);
console.log('差值'+chazhi.x,chazhi.y);
if(option.x) {
mm.x=chazhi.x+cur.x;
if (mm.x>=cliwidth-boxW) {
mm.x=cliwidth-boxW;
}else if(mm.x<=0){
mm.x=0;
}
}
if(option.y) {
mm.y=chazhi.y+cur.y;
if (mm.y>=cliheight-boxH) {
mm.y=cliheight-boxH;
}else if(mm.y<=0){
mm.y=0;
}
}
console.log('当前+差值'+mm.x,mm.y);
movee(el,mm.x,mm.y);
}
function end(ev){
if (!isTouchMove) return;
var touch=ev.changedTouches[0];
// var chazhi={};
// chazhi.x=touch.pageX-star.x;
// chazhi.y=touch.pageY-star.y;
cur.x=mm.x;
cur.y=mm.y;
console.log('最后的值'+cur.x,cur.y);
isTouchMove=false;
}
function movee(el,x,y){
x=x||0;
y=y||0;
el.style.transform ='translate3d('+x+'px,'+y+'px,0)';
}
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星