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 相关文章推荐
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Vue父子组件传值的一些坑
Sep 16 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 错误处理经验分享
2011/10/11 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python获取当前日期和时间的方法
2015/04/30 Python
python difflib模块示例讲解
2017/09/13 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
jupyter notebook清除输出方式
2020/04/10 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
我爱家乡演讲稿
2014/09/12 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
党小组鉴定意见
2015/06/02 职场文书
浅析Python中的套接字编程
2021/06/22 Python