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即可解决问题

相关推荐
IT_陈寒4 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙4 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode4 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真4 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师4 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强4 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan4 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫4 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh4 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex4 小时前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript