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实现读取txt文档的脚本
Jul 20 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
JS实现的简单分页功能示例
Aug 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
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
js实现文字截断功能
2016/09/14 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Django 反向生成url实例详解
2019/07/30 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python zip函数打包元素实例解析
2019/12/11 Python
pycharm导入源码的具体步骤
2020/08/04 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
思想汇报范文
2013/11/04 职场文书
爱国电影观后感
2015/06/19 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript