创建dialogDrag.js

/************************************************
Description: el-dialog弹窗组件添加拖拽支持
Dependencies:vue.jsel-dialog (element-ui)
************************************************/Vue.directive('dialogDrag', {bind: function (el) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cursor = 'move'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)dialogHeaderEl.onmousedown = e => {// 鼠标按下，计算当前元素距离可视区的距离//const disX = e.clientX - dialogHeaderEl.offsetLeft//const disY = e.clientY - dialogHeaderEl.offsetTopconst disX = e.clientXconst disY = e.clientY// 获取到的值带px 正则匹配替换let styL, styT// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace(/\px/g, '')styT = +sty.top.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离const l = e.clientX - disXconst t = e.clientY - disYvar tempX = l + styLvar tempY = t + styT// 移动当前元素dragDom.style.left = `${tempX}px`dragDom.style.top = `${tempY}px`                //确保不移动超出可视范围之外//（Reference:  https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect）var rect = dragDom.getBoundingClientRect()while (rect.x < 0 || rect.y < 0) {if (rect.x < 0) {tempX++}if (rect.y < 0) {tempY++}dragDom.style.left = `${tempX}px`dragDom.style.top = `${tempY}px`rect = dragDom.getBoundingClientRect()}// 将此时的位置传出去// binding.value({x:e.pageX,y:e.pageY})}document.onmouseup = function () {document.onmousemove = nulldocument.onmouseup = null}}}
})

在需要的地方的地方引入

1.  比如vue组件扩展JVue.js中引入

import "/Components/vue/dialogDrag.js"   
//(以import导入到JVue.js，JVue.js需以type="module"引入)

2.  或者在使用弹窗的页面中在引入vue后以默认的type="text/javascript"引入

<script src="/Components/vue/dialogDrag.js"></script>  

在需要添加拖拽功能的弹窗组件el-dialog中直接使用新添加 v-dialog-drag 属性(指令)即可

<el-dialog title="提示" :visible.sync="dialogVisible" width="550px" :close-on-click-modal="false" v-dialog-drag><el-form ......>......</el-form><div slot="footer" class="dialog-footer center"><el-button size="small" @@click="dialogVisible = false">{{ $t("sos.btn.Cancel") }}</el-button><el-button size="small" type="primary" @@click="saveForm">{{ $t("sos.btn.Ok") }}</el-button></div>
</el-dialog>

参考：https://juejin.cn/post/7250639505526472741