本人在开发中遇到实现一个基于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事件，当然如果不作出里会出现两种方法同时执行，所以我采用了一种根据两者执行顺序的先后和时间的长短来进行了判断这样的一个处理方法。
