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 相关文章推荐
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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实现数组递归转义的方法
2014/08/28 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python实现自动发送报警监控邮件
2018/06/21 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python super()函数使用及多重继承
2020/05/06 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
自荐信格式范文
2013/10/07 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
机械专业求职信
2014/05/25 职场文书
自书遗嘱范文
2015/08/07 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Java基础之this关键字的使用
2021/06/30 Java/Android