vue移动端写的拖拽功能示例代码


Posted in Javascript onSeptember 09, 2020

相关知识点

touchstart 当在屏幕上按下手指时触发
touchmove 当在屏幕上移动手指时触发
touchend 当在屏幕上抬起手指时触发
mousedown mousemove mouseup对应的是PC端的事件
touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

效果图

vue移动端写的拖拽功能示例代码

实现步骤html

总结了一下评论,好像发现大家都碰到了滑动的问题。就在这里提醒一下吧。可将该悬浮 DIV 同你的 scroller web 同级。

<template>
	<div id="webId">
  	<div>你的web页面</div>
	  <!-- 1.1 如果碰到滑动问题,请检查这里是否属于同一点。 -->
	  <!-- 悬浮的HTML -->
	  <div class="xuanfu" id="moveDiv"
	   @mousedown="down()" @touchstart="down()"
	   @mousemove.prevent.stop="move()"
     @touchmove.prevent.stop="move()"
	   @mouseup="end()" @touchend="end()"
	  >
	   <div class="yuanqiu">11</div>
	  </div>
	</div>
</template>

js

<script>
data() {
 return {
  flags: false,
  position: { x: 0, y: 0 },
  nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
 }
}

methods: {
 // 实现移动端拖拽
 down(){
  this.flags = true;
  let touch;
  if(event.touches){
    touch = event.touches[0];
  }else {
    touch = event;
  }
  this.position.x = touch.clientX;
  this.position.y = touch.clientY;
  this.dx = moveDiv.offsetLeft;
  this.dy = moveDiv.offsetTop;
 },
 move(){
  if(this.flags){
   let touch ;
   if(event.touches){
     touch = event.touches[0];
   }else {
     touch = event;
   }
   this.nx = touch.clientX - this.position.x;
   this.ny = touch.clientY - this.position.y;
   this.xPum = this.dx+this.nx;
   this.yPum = this.dy+this.ny;
   //添加限制:只允许在屏幕内拖动
	 const maxWidth = document.body.clientWidth - 54;//屏幕宽度减去悬浮框宽高
	 const maxHeight = document.body.clientHeight - 54;
	 if (this.xPum < 0) { //屏幕x限制
		this.xPum = 0;
	 } else if (this.xPum>maxWidth) {
	  this.xPum = maxWidth;
	 }
	 if (this.yPum < 0) { //屏幕y限制
		this.yPum = 0;
	 } else if (this.yPum>maxHeight) {
		this.yPum = maxHeight;
	 }
   moveDiv.style.left = this.xPum+"px";
   moveDiv.style.top = this.yPum +"px";
   //阻止页面的滑动默认事件
   document.addEventListener("touchmove",function(){ // 1.2 如果碰到滑动问题,请注意是否获取到 touchmove
     event.preventDefault();//jq 阻止冒泡事件
     // event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation()
   },false);
  }
 },
//鼠标释放时候的函数
 end(){
  this.flags = false;
 },
}
</script>

css

<style>
 /*css样式可自定义 仅提供参考*/
 #webId { position: relative; }
 .xuanfu {
  height: 54px; /* rem = 12px */
  width: 54px;
  /*1.3 如果碰到滑动问题,请检查 z-index。z-index需比web大一级*/
  z-index: 999;
  position: fixed;
  top: 4.2rem;
  right: 3.2rem;
  border-radius: 0.8rem;
  background-color: rgba(0, 0, 0, 0.55);
 }
 .yuanqiu {
  height: 2.7rem;
  width: 2.7rem;
  border: 0.3rem solid rgba(140, 136, 136, 0.5);
  margin: 0.65rem auto;
  color: #000000;
  font-size: 1.6rem;
  line-height: 2.7rem;
  text-align: center;
  border-radius: 100%;
  background-color: #ffffff;
 }
</style>

总结

到此这篇关于vue移动端写的拖拽功能示例代码的文章就介绍到这了,更多相关vue移动端拖拽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
You might like
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
简述Python2与Python3的不同点
2018/01/21 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
const和static readonly区别
2013/05/20 面试题
社区健康教育实施方案
2014/03/18 职场文书
银行委托书范本
2014/09/28 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
解除合同协议书范本
2016/03/21 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python