vue 拖拽移动(类似于iPhone虚拟home )
vue 移动端 PC 兼容 元素 拖拽移动
效果演示
事件知识点
移动端 | PC端 | 注释 |
touchstart | mousedown | 鼠标/手指按下事件 |
touchmove | mousemove | 鼠标/手指移动事件 |
touchend | mouseup | 鼠标松开/手指抬起事件 |
<template lang="pug">
//- 当前页面全局容器
div.SchemeDetail(
ref='pageDiv'
@mousemove="onmousemove($event)" @touchmove="onmousemove($event)"
@mouseup="onmouseup($event)" @touchend="onmouseup($event)"
)
//- 加号拖拽元素
div.action-mgr(:class="{ active :mgrState}"
ref='actionMgr'
@click="mgrState=!mgrState"
@mousedown="onmousedown($event)" @touchstart="onmousedown($event)")
<i class="icon iconfont icon-jia"></i>
.....
</template> <script>
export default {
data() {
return {
mgrState: false,
mousedownState: false, //鼠标默认抬起
iX: 0,//鼠标坐标 与 拖拽按钮 间距 x
iY: 0//鼠标坐标 与 拖拽按钮 间距 y
};
},
methods: {
send() {
console.log("send");
},
edit() {
console.log("edit");
},
/* 鼠标按下事件 */
onmousedown(event) {
/* 此处判断 pc 或 移动端 得到 event 事件 */
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
// 鼠标点击 面向页面 的 x坐标 y坐标
let { clientX, clientY } = touch;
// 鼠标x坐标 - 拖拽按钮x坐标 得到鼠标 距离 拖拽按钮 的间距
this.iX = clientX - this.$refs.actionMgr.offsetLeft;
// 鼠标y坐标 - 拖拽按钮y坐标 得到鼠标 距离 拖拽按钮 的间距
this.iY = clientY - this.$refs.actionMgr.offsetTop;
// 设置当前 状态为 鼠标按下
this.mousedownState = true;
},
/* 鼠标移动事件 */
onmousemove(event) {
//鼠标按下 切移动中
if (this.mousedownState) {
/* 此处判断 pc 或 移动端 得到 event 事件 */
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
// 鼠标移动时 面向页面 的 x坐标 y坐标
let { clientX, clientY } = touch;
//当前页面全局容器 dom 元素 获取容器 宽高
let {
clientHeight: pageDivY,
clientWidth: pageDivX
} = this.$refs.pageDiv;
/* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标 得到 拖拽按钮的 左上角 x轴y轴坐标 */
let [x, y] = [clientX - this.iX, clientY - this.iY]; //拖拽按钮 dom 元素 获取 宽高 style 对象
let {
clientHeight: actionMgrY,
clientWidth: actionMgrX,
style: actionMgrStyle
} = this.$refs.actionMgr;
/* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
*/
if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
else if (x < 0) x = 0;
if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
else if (y < 0) y = 0;
// 计算后坐标 设置 按钮位置
actionMgrStyle.left = `${x}px`;
actionMgrStyle.top = `${y}px`;
actionMgrStyle.bottom = "auto";
actionMgrStyle.right = "auto";
//当按下键滑动时, 阻止屏幕滑动事件
event.preventDefault();
}
},
/* 鼠标抬起事件 */
onmouseup(event) {
// 设置当前状态为鼠标抬起
this.mousedownState = false;
}
}
};
</script>
vue 拖拽移动(类似于iPhone虚拟home )的更多相关文章
- Vue拖拽组件
vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- vue2-dragula vue拖拽组件
https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...
- vue拖拽插件(弹框拖拽)
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- Vue拖拽交换数据(非插件)
HelloWorld.vue 文件 <template> <div class="hello"> <h1>{{ msg }}</h1> ...
- 一个全新的Vue拖拽特性实现:“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...
- 一个全新的Vue拖拽特性实现:“移动”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对移动的开发进行阐述 关于调整尺寸的开发,请参见:拖拽:调整尺寸 演示 开发步骤 下面以模块test-party为 ...
随机推荐
- spring----bean的使用
这篇文章不介绍spring的相关概念,只记录一下springbean的创建方式和使用方式. 一.bean的创建和调用 1.创建演示需要用到的类:Student.Teacher.Person packa ...
- 定时删除所有文件夹下的_desktop.ini文件
写个批处理,删除对应的文件,命名为DELDesktopIni.bat,存于D盘根目录 @echo off :delini for %%a in ( C: D: E: ) DO ( del /f/s/a ...
- 关于Python, ftplib模块中的cwd()进入含中文目录失败的问题
使用Python的ftplib模块连接ftp服务器时, 使用cwd()连接含中文的目录, 报错 : UnicodeEncodeError: 'latin-1' codec can't encode c ...
- linux内核调试技巧之一 dump_stack【转】
在内核中代码调用过程难以跟踪,上下文关系复杂,确实让人头痛 调用dump_stack()就会打印当前cpu的堆栈的调用函数了. 如此,一目了然的就能看到当前上下文环境,调用关系了 假设: 遇到uvc_ ...
- C++调用Opencv实践中遇到的问题备忘录
1.编写一个显示图片的项目,但显示的图片全灰色. 原因:需要在imshow()函数前加一个namedWindow()函数.https://blog.csdn.net/mao_hui_fei/artic ...
- VMware虚拟机系统无法使用桥接联网
1.环境 VMware 14.1.1 虚拟系统:Windows Server 2008 32位 2.解决办法 打开虚拟网络编辑器 有红框中的提示出现时,就点击更改设置 点击桥接模式,在VMnet信息中 ...
- Log4j分级别存储日志到数据库
首先先创建三张表,按照自己的需求创建 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE lo ...
- threejs学习笔记(二)
THREE.WebGLRenderer THREE.Scene THREE.OrthographicCamera正交相机 THREE.PerspectiveCamera透视相机 renderer.se ...
- 关于idea在运行web项目时部署的位置
(转) 以前一直很好奇,在idea中运行tomcat,把项目部署到其中,运行起来,然后我去tomcat目录下去看,根本找不到我部署的项目 那我的项目是咋运行的啊… - - 后来我就查啊查 ,纠结啊纠结 ...
- 8-过滤器Filter和监听器Listener
一.web监听器:监听特殊事件的发生1.监听实现步骤 a.写一个java类,实现特定的接口,重写相关方法 b.在web.xml中,牌配置 <listener> <listener-c ...