element dialog拖拽

1、vue项目中 在src目录下新建文件夹util，在文件夹下新建一个js文件dialogdrag.js

import Vue from 'vue';
let draging = false;
let dragDom=HTMLElement | null;
let dragpoint={ x:null, y:null };
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    let dialogHeaderEl = el.querySelector('.el-dialog__header');
    dialogHeaderEl.addEventListener('mousedown', (ev) => {
      let target = ev.target;
      //由于点击关闭按钮会事件冒泡，取消拖拽
      if (target.classList.contains('el-dialog__close')) {
        return;
      }
      draging = true;
      dragDom = el.querySelector('.el-dialog');
      //自定义样式，让弹窗在拖拽过程中鼠标指针变成十字移动
      dragDom?.classList.add('draging');
      dragpoint = {
        x: ev.clientX,
        y: ev.clientY
      }
    });
  }
});
document.addEventListener('mouseup', (ev) => {
  draging = false;
  // dragDom?.classList.remove('draging');
  dragDom = null;
});
document.addEventListener('mousemove', (ev) => {
  if (draging) {
    let _dragdom = dragDom;
    let sty = window.getComputedStyle(_dragdom, null);
    _dragdom.style.marginLeft = `${parseFloat(sty.marginLeft) + ev.clientX - dragpoint.x}px`;
    _dragdom.style.marginTop = `${parseFloat(sty.marginTop) + ev.clientY - dragpoint.y}px`;
    dragpoint = {
      x: ev.clientX,
      y: ev.clientY
    }
  }
});

直接复制即可

2、在main.js中引入文件

import '@/util/dialogdrag.js';

文件路径自行更改

3、在el-dialog中 直接添加v-dialogDrag

<el-dialog
        v-dialogDrag
        title="详情"
        :visible.sync="dialogVisible"
        width="30%"
        :modal="false"
        :close-on-click-modal="false"></el-dialog>

就可以拖动弹框，只作用在标题栏拖动