vuejs移动端实现div拖拽移动


Posted in Javascript onJuly 25, 2019

vue移动端实现div拖拽移动,供大家参考,具体内容如下

本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。

相关知识点

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

效果图

vuejs移动端实现div拖拽移动

实现步骤

(一)html

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

html结构: <template> <div>你的web页面</div> <div>悬浮DIV</div> </template>

<template>
 <div id="webId">
 <div>你的web页面</div>
 <!-- 1.1 如果碰到滑动问题,请检查这里是否属于同一点。 -->
 <!-- 悬浮的HTML -->
 <div v-if="!isShow" class="xuanfu" id="moveDiv"
 @mousedown="down" @touchstart="down"
 @mousemove="move" @touchmove="move"
 @mouseup="end" @touchend="end"
 >
 <div class="yuanqiu">
 {{pageInfo.totalPage}}
 </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;
 var 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){
 var 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;
 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>
 .xuanfu {
 height: 4.5rem;
 width: 4.5rem;
 /*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>

实现好JS逻辑,基本上,问题不大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
You might like
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
ext form 表单提交数据的方法小结
2008/08/08 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Django返回json数据用法示例
2016/09/18 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
大二自我鉴定范文
2013/10/05 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
锦旗赠语
2015/06/23 职场文书