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


Posted in Javascript onAugust 21, 2020

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

1 首先创建一个div

<div class="floatball" id="floatball"
 @mousedown="down" @touchstart.stop="down"
 @mousemove="move" @touchmove.stop="move"
 @mouseup="end" @touchend.stop="end" @click="showRewardDesc"
 :style="{top:position.y+'px', left:position.x+'px'}">
 奖励规则
</div>

2 给 div 附上样式

<style>
 .floatball{
 color:white;
 height:50px;
 width: 50px;
 padding: 5px;
 z-index: 990;
 position: fixed;
 top: 60px;
 right: 320px;
 border-radius: 50%;
 background-color: rgba(29, 157, 237,0.8);
 }

</style>

3 给 div 附上事件

准备四个变量

1)、屏幕长

var screenHeight = window.screen.height

2)、屏幕宽

var screenWidth = window.screen.width

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

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

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

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

down(event){
 this.flags = true;
 var touch ;
 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
} else if (this.position.x > screenWidth - touch.target.clientWidth) {
 this.position.x = screenWidth - touch.target.clientWidth
}
if (this.position.y < 0) {
 this.position.y = 0
} else if (this.position.y > screenHeight - touch.target.clientHeight) {
 this.position.y = screenHeight - touch.target.clientHeight
}

拖拽结束

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

全部代码

<template>
 <div class="floatball" id="floatball"
 @mousedown="down" @touchstart.stop="down"
 @mousemove="move" @touchmove.stop="move"
 @mouseup="end" @touchend.stop="end"
 :style="{top:position.y+'px', left:position.x+'px'}">
 奖励规则
 </div>
</template>

<script>
// 鼠标位置和div的左上角位置 差值
var dx,dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height

export default {
 data() {
 return {
 flags: false,
 position: {
 x: 320,
 y: 60
 },
 }
 },
 

 methods: {
 // 实现移动端拖拽
 down(event){
 this.flags = true;
 var touch ;
 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
 },
 move() {
 if (this.flags) {
 var touch ;
 if (event.touches) {
 touch = event.touches[0];
 } else {
 touch = event;
 }
 // 定位滑块的位置
 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
 } else if (this.position.x > screenWidth - touch.target.clientWidth) {
 this.position.x = screenWidth - touch.target.clientWidth
 }
 if (this.position.y < 0) {
 this.position.y = 0
 } else if (this.position.y > screenHeight - touch.target.clientHeight) {
 this.position.y = screenHeight - touch.target.clientHeight
 }
 //阻止页面的滑动默认事件
 document.addEventListener("touchmove",function(){
 event.preventDefault();
 },false);
 }
 },
 //鼠标释放时候的函数
 end(){
 console.log('end')
 this.flags = false;
 },

 }
 
}
</script>

<style>
 .floatball{
 color:white;
 height:50px;
 width: 50px;
 padding: 5px;
 z-index: 990;
 position: fixed;
 top: 60px;
 right: 320px;
 border-radius: 50%;
 background-color: rgba(29, 157, 237,0.8);
 }

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
node.js中使用Export和Import的方法
Sep 18 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PDO::_construct讲解
2019/01/27 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
再探JavaScript作用域
2014/09/24 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python使用xpath中遇到:到底是什么?
2018/01/04 Python
关于Python的一些学习总结
2018/05/25 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
初中国旗下的演讲稿
2014/08/28 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
人与自然观后感
2015/06/16 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript