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 分钟前
HTTPS是如何工作的?从HTTP到HTTPS的加密演进
前端
隔窗听雨眠10 分钟前
HTML头部元信息避坑指南
前端·html
Gauss松鼠会17 分钟前
【openGauss】openGauss 磁盘引擎之 ustore
java·服务器·开发语言·前端·数据库·经验分享·gaussdb
LIO18 分钟前
前端响应式页面开发全攻略:核心技术 + 实现效果 + 实战指南
前端·响应式设计
许彰午27 分钟前
Spring Boot + Vue 实现 XML 动态表单:固定字段 + 自由扩展方案
xml·vue.js·spring boot
得物技术34 分钟前
AI驱动:从运营行为到自动化用例的智能化实践|得物技术
前端·ai编程·全栈
前端那点事35 分钟前
Vue并发控制|几十个请求高效管控(实战方案+可运行代码)
前端·vue.js
妄想出头的工业炼药师38 分钟前
后端优化MS mapping
前端
前端那点事42 分钟前
Vue大批量接口请求优化|告别卡顿、超时!前端落地实战指南
前端·vue.js
史迪仔01121 小时前
[QML] Qt Quick Dialogs 模块使用指南
开发语言·前端·c++·qt