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

相关推荐
onebyte8bits2 分钟前
NestJS 系列教程(十八):文件上传与对象存储架构(Multer + S3/OSS + 访问控制)
前端·架构·node.js·状态模式·nestjs
Ruihong4 分钟前
放弃 Vue3 传统 <script>!我的 VuReact 编译器做了一次清醒取舍
前端·vue.js
weixin_456164836 分钟前
vue3 父组件向子组件传参
前端
Beginner x_u8 分钟前
前端八股整理|CSS|高频小题 01
前端·css·八股
蜡台13 分钟前
IDEA LiveTemplates Vue ElementUI
前端·vue.js·elementui·idea·livetemplates
E-cology16 分钟前
【泛微低代码开发平台e-builder】使用HTML组件实现页面中部分区域自定义开发
前端·低代码·泛微·e-builder
用户97514707513617 分钟前
如何使用Promise.any()处理多个异步操作?
前端
yuki_uix18 分钟前
只渲染「必要的部分」:从 DepartmentTree 和 VirtualList 看前端的两种裁剪哲学
前端·面试
苏瞳儿19 分钟前
前端/后端-配置跨域
前端·javascript·node.js·vue
用户9365688887019 分钟前
Promise.any()使用场景及实例
前端