vue 元素拖动,快捷方便,已解决

1.vDrag.js

css 复制代码
import Vue from "vue";

Vue.directive("Drag", (el) => {
  const moveEl = el;
  let flag = false;
  const mouseDown = (e) => {
    flag = true;
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop
    const move = (e) => {
      if (flag) {
        el.style.cursor = 'move';
        el.style.marginLeft = '0px';
        el.style.marginTop = '0px';
        el.style.left = e.pageX - X + 'px';
        el.style.top = e.pageY - Y + 'px';
      }
    }
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', (e) => {
      document.removeEventListener('mousemove', move);
    });
  }
  moveEl.addEventListener('mousedown', mouseDown);
})

2.加上这两个属性内容

元素随意拖动

出现问题:出现鼠标mouseup事件监听bug,导致鼠标释放事件和元素和鼠标粘在一起

解决方法:

改为false即可解决问题

相关推荐
Yeh202058几秒前
springboot+vue笔记
vue.js·spring boot·笔记
Highcharts.js7 分钟前
数学函数双曲线音频图表(y=1/x 双曲线)|图表代码示例
前端·react.js·实时音视频·highcharts·音频图表·双曲线图表
放下华子我只抽RuiKe512 分钟前
React 从入门到生产(一):JSX 与组件思维
前端·javascript·人工智能·pytorch·深度学习·react.js·前端框架
冴羽yayujs36 分钟前
JavaScript 9 个先有库再有 API 的故事
开发语言·javascript·ecmascript
m0_7510186642 分钟前
docker 安装 nginx
vue.js·nginx·docker
油丶酸萝卜别吃1 小时前
JavaScript 深度合并函数 deepMerge 实现指南(附完整测试用例)
开发语言·javascript·测试用例
问心无愧05131 小时前
ctf show web 入门152
前端·笔记
kyriewen1 小时前
Copilot下个月按Token收钱,我算了一笔账:重度用户一年要多花3000块
前端·javascript·openai
zyl837211 小时前
3Dmol.js + Vue3快速上手
vue.js
镜宇秋霖丶1 小时前
2026.5.18@霖宇博客制作中遇见的问题
vue.js