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

相关推荐
高晶2 分钟前
ARM 嵌入式 Linux 内核编译与结构解析实战
前端·架构
今年下半年30 分钟前
【前端】Vue2 项目 ECharts 统计图表组件封装与使用实践(附组件源码)
前端·javascript·echarts
冒险的豆子35 分钟前
JS 原型链 通俗易懂 解释说明(类比 关系)
开发语言·javascript·原型模式
西索斯coding39 分钟前
在 中接入 教程:p配置、m填写、扩展思考参数一篇就够(2)
java·前端·javascript·ai
代码猎人41 分钟前
前端怎么优化项目基础架构
前端
__sjfzllv___1 小时前
在职前端Leader学习/转行 AI Agent -DAY78
前端
代码猎人1 小时前
前端怎么封装工具类
前端
deli0071 小时前
PDF 合并别再用在线工具:12 份文件浏览器里合完,实测不上传
前端
shuoshuohaohao1 小时前
SpringBoot3-web开发-静态资源-内容协商
前端
特立独行的猫A1 小时前
仓颉UI开发实战:我用仓颉写了个桌面版力扣:从判题机到 100 道题
vue.js