微客导航 » 文章资讯 » vue实现移动端触屏拖拽功能

vue实现移动端触屏拖拽功能

2023-07-18 10:24:04 324

vue实现移动端可拖拽浮球，供大家参考，具体内容如下

1首先创建一个div


奖励规则

2给div附上样式

3给div附上事件

准备四个变量

1）、屏幕长

varscreenHeight=window.screen.height

2）、屏幕宽

varscreenWidth=window.screen.width

3）、初始触控点距离div左上角的横向距离dx

4）、初始触控点距离div左上角的竖向距离dy

在开始拖拽时，计算出鼠标点（初始触控点）和div左上角顶点的距离

down(event){
this.flags=true;
vartouch;
if(event.touches){
touch=event.touches[0];
}else{
touch=event;
}
console.log('鼠标点所在位置',touch.clientX,touch.clientY)
console.log('div左上角位置',event.target.offsetTop,event.target.offsetLeft)
dx=touch.clientX-event.target.offsetLeft
dy=touch.clientY-event.target.offsetTop
},

拖拽进行时，将触控点的位置赋值给div

//定位滑块的位置
this.position.x=touch.clientX-dx;
this.position.y=touch.clientY-dy;

//限制滑块超出页面
//console.log('屏幕大小',screenWidth,screenHeight)
if(this.position.x<0){
this.position.x=0
}elseif(this.position.x>screenWidth-touch.target.clientWidth){
this.position.x=screenWidth-touch.target.clientWidth
}
if(this.position.y<0){
this.position.y=0
}elseif(this.position.y>screenHeight-touch.target.clientHeight){
this.position.y=screenHeight-touch.target.clientHeight
}

拖拽结束

//鼠标释放时候的函数
end(){
console.log('end')
this.flags=false;
},

全部代码

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

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

返回顶部
3162201930
czq8825@qq.com

vue实现移动端触屏拖拽功能

热门推荐

随机推荐