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

相关推荐
逃逸线LOF20 分钟前
CSS之精灵图(雪碧图)Sprites、字体图标
前端·css
进取星辰1 小时前
31、魔法生物图鉴——React 19 Web Workers
开发语言·javascript·ecmascript
GISer_Jing1 小时前
Vue 和 React 状态管理的性能优化策略对比
vue.js·react.js·性能优化
海天胜景1 小时前
jqGrid冻结列错行问题,将冻结表格(悬浮表格)与 正常表格进行高度同步
前端
清风细雨_林木木2 小时前
解决 Tailwind CSS 代码冗余问题
前端·css
HSunR2 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
搏博2 小时前
WPS中代码段的识别方法及JS宏实现
开发语言·javascript·wps
三天不学习2 小时前
VueUse/Core:提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
好青崧2 小时前
等于和绝对等于的区别
javascript
余道各努力,千里自同风3 小时前
CSS实现文本自动平衡text-wrap: balance
前端·css