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

相关推荐
吃饺子不吃馅6 分钟前
qiankun、single-spa 和 import-html-entry还傻傻😧分不清楚?
前端·面试·架构
不叫猫先生24 分钟前
【React】脚手架进阶
前端·react.js·前端框架
你的万花筒35 分钟前
【解决mac本Chrome谷歌浏览器不能访问网络】
前端·chrome·macos
牛奶1 小时前
如果我是前端面试官-HTML&CSS篇
前端·css·面试
一只小菜鸡1 小时前
python+django+elasticsearch实现自动化部署平台构建日志记录(前端vue-element展示)
前端·python·django
pink大呲花1 小时前
onerror事件的理解与用法
前端
huaqianzkh1 小时前
了解npm:JavaScript包管理工具
前端·javascript·npm
借来一夜星光1 小时前
【Vue实战】Vuex 和 Axios 拦截器设置全局 Loading
前端·javascript·vue.js
z_y_j2299704381 小时前
AXIOS的引入和封装
前端
癞皮狗不赖皮2 小时前
WEB 攻防-通用漏-XSS 跨站脚本攻击-反射型/存储型/DOM&BEEF-XSS
前端·网络·网络安全·xss