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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
cookie的secure属性详解
Apr 08 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
Javascript之Math对象详解
Jun 07 Javascript
第一篇初识bootstrap
Jun 21 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
webpack 模块热替换原理
2018/04/09 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
javascript实现简单打字游戏
2019/10/29 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
护士自荐信
2013/10/25 职场文书
好的自荐信的要求
2013/10/30 职场文书
经销商会议欢迎词
2014/01/11 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB