微客导航 » 文章资讯 » js实现适配移动端的拖动效果

js实现适配移动端的拖动效果

2023-08-03 04:36:04 284

本文实例为大家分享了js实现适配移动端的拖动效果，供大家参考，具体内容如下

1.html

2.js

varflag=false;
varcur={
x:0,
y:0
}
varnx,ny,dx,dy,x,y;

functiondown(){
flag=true;
vartouch;
if(event.touches){
touch=event.touches[0];
}else{
touch=event;
}
cur.x=touch.clientX;
cur.y=touch.clientY;
dx=div2.offsetLeft;
dy=div2.offsetTop;
}

functionmove(){
if(flag){
vartouch;
if(event.touches){
touch=event.touches[0];
}else{
touch=event;
}
nx=touch.clientX-cur.x;
ny=touch.clientY-cur.y;
x=dx+nx;
y=dy+ny;
div2.style.left=x+"px";
div2.style.top=y+"px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
}
}
//鼠标释放时候的函数
functionend(){
flag=false;
}
vardiv2=document.getElementById("div2");
div2.addEventListener("mousedown",function(){
down();
},false);
div2.addEventListener("touchstart",function(){
down();
},false)
div2.addEventListener("mousemove",function(){
move();
},false);
div2.addEventListener("touchmove",function(){
move();
},false)
document.body.addEventListener("mouseup",function(){
end();
},false);
div2.addEventListener("touchend",function(){
end();
},false);

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现适配移动端的拖动效果

热门推荐

随机推荐