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插件开发全解析
Oct 10 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
vue跨域解决方法
Oct 15 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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
用户的详细注册和判断
2006/10/09 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Django中Forms的使用代码解析
2018/02/10 Python
python使用udp实现聊天器功能
2018/12/10 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
医学生自荐信
2013/12/03 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
初中生自我鉴定
2014/02/04 职场文书
百年校庆节目主持词
2014/03/27 职场文书
邀请函模板
2015/02/02 职场文书
教师工作表现自我评价
2015/03/05 职场文书
拉贝日记观后感
2015/06/05 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers