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

相关推荐
Aolith1 分钟前
从一堆 Bug 到一行代码:我是如何用 keep-alive 优雅解决 Vue 滚动位置恢复的
vue.js·全栈
独泪了无痕11 分钟前
利用vue-pdf-embed实现PDF文件的预览
前端·vue.js
xkxnq12 分钟前
第七阶段:企业级项目实战核心能力(118天)Vue项目缓存策略:接口缓存(内存+本地)+ 组件缓存+路由缓存组合方案
vue.js·spring·缓存
Highcharts.js15 分钟前
无需搭建数据管道,如何快速上线投资基金筛选器?
开发语言·javascript·react.js·前端框架·highcharts
Exploring15 分钟前
Hola 计算器 v1.0.1 发布:个税计算全面升级,劳务报酬也能算清楚了!
前端
Pan Zonghui19 分钟前
个人开源技术博客前端
前端·开源
kyriewen24 分钟前
我让AI替我写Git提交信息,老板以为我每天工作16小时
前端·javascript·git
接着奏乐接着舞32 分钟前
react native expo打包
javascript·react native·react.js
简简单单就是我_hehe1 小时前
高效掌握 JeecgBoot JSelect 组件:外部传参、搜索回显与默认值设置全攻略
前端