基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

本人在开发中遇到实现一个基于vue的悬浮框拖动效果，经过努力研究最终实现了功能，一下是我的方法和部分代码，希望对您有所帮助，如有不对的地方还请指出。谢谢！下面步入正题：
首先展示一下功能的效果图：

要求就是使用鼠标可以拖动在页面的可视区域进行来回移动。
下面是我写的vue页面中对应的元素的部分代码：在类名为“alarmMain”的元素上添加了一个@mousedown="move"的拖动事件

<template><!-- 告警悬浮框 --><div class="alarmBox"><div class="alarmMain"ref="alarmMain":class="alarmNumber > 0 ? 'alarmMain2':'alarmMain1'"@mousedown="move"@click="open">{{alarmNumber}}条告警未处理</div></div>
</template>

下面是javascript中的代码：

 methods: {   // 拖动事件move (e) {console.log(e, 'eeee')let odiv = e.target // 获取目标元素this.$refs.alarmMain.setAttribute('data-flag', false) // 动态为元素添加属性用于判断是否为拖动状态const firstTime = new Date().getTime()// 算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopdocument.onmousemove = (e) => { // 鼠标按下并移动的事件// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY// 绑定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left// 移动当前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null// onmouseup 时的时间，并计算差值const lastTime = new Date().getTime()if ((lastTime - firstTime) < 200) {this.$refs.alarmMain.setAttribute('data-flag', true)}}},// 告警事件弹框的现实与隐藏open () {//  验证是否为点击事件，是则继续执行click事件，否则不执行let isClick = this.$refs.alarmMain.getAttribute('data-flag')if (isClick !== 'true') {return false} else {this.$refs.alarmTable.open()}}}

以上是实现基于vue的悬浮框拖动效果的代码，当然在上面JavaScript代码中已经包含了解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突的代码，在页面部分，我是在同一个元素中同时添加了一个move事件和点击click事件，当然如果不作出里会出现两种方法同时执行，所以我采用了一种根据两者执行顺序的先后和时间的长短来进行了判断这样的一个处理方法。

基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突相关推荐

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...
vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题
解决Vue打包上线之后部分CSS不生效的问题首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
mousedown mousemove mouseup 与 click事件冲突的解决办法
使用css样式pointer-events解决需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup ...
搜索提示时jquery的focusout和click事件冲突问题完美解决
在主流的搜索引擎上搜索时,输入内容,往往会弹出智能提示.输入框为input,智能提示区域为suggest.接下来一般有两种操作: 1.选择某一提示,则把内容复制到input中,自动关闭suggest: ...
blur事件与click事件冲突的解决办法
问题当对节点同时添加 blur事件以及 click事件,触发 click事件的时候程序报出这样的一个错误(Chrome浏览器): Uncaught NotFoundError: Failed t ...
Vue插件开发工具的安装以及解决Vue Devtools安装后语法启动，图标仍然不亮的问题
插件安装: 1.极简插件安装地址:https://chrome.zzzmh.cn/index 安装详细步骤看下篇文档解决问题第一: 1.找到扩展程序的安装目录.如图片所示: 2.用记事本打开,或者 ...

基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突相关推荐

最新文章

热门文章