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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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字符串 ==比较运算符的副作用
2009/10/21 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue cli 全面解析
2018/02/28 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python实现ID3决策树算法
2017/12/20 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
社区工作者先进事迹
2014/01/18 职场文书
大学生党员自我批评
2014/02/14 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis