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 相关文章推荐
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
js 字符串转化成数字的代码
2011/06/29 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python 实现单通道转3通道
2019/12/03 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
给老师的一封建议书
2014/03/13 职场文书
英语教师求职信
2014/06/16 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
发票退票证明
2015/06/24 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书