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

weixin_45290022

于 2019-10-24 09:04:26 发布

阅读量1.5k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45290022/article/details/102715095

版权

本文介绍了如何在Vue项目中实现悬浮框的拖动效果，并解决了自定义拖拽指令时onmouseup与click事件冲突的问题。通过在元素上添加@mousedown事件并配合JavaScript代码完成拖动功能，同时采用时间判断避免了拖动和点击同时触发的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人在开发中遇到实现一个基于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<

最低0.47元/天解锁文章