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 相关文章推荐
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
js实现随机抽奖
Mar 19 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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代码包装修正版
2008/03/15 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php单例模式的简单实现方法
2016/06/10 PHP
轻松实现php文件上传功能
2017/02/17 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python实现读取文件最后n行的方法
2017/02/23 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
大型公益活动策划方案
2014/08/20 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
领导班子对照检查材料
2014/09/22 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL