编写基础js，取名叫drag.js

    1. export default {
    2.   bind(el, binding, vnode) {
    3.     const dialogHeaderEl = el.querySelector('.el-dialog__header')
    4.     const dragDom = el.querySelector('.el-dialog')
    5.     dialogHeaderEl.style.cursor = 'move'
    6.     dragDom.style.cssText += ';top:0px;'
    8.     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    9.     const getStyle = (function() {
    10.       if (window.document.currentStyle) {
    11.         return (dom, attr) => dom.currentStyle[attr]
    12.       } else {
    13.         return (dom, attr) => getComputedStyle(dom, false)[attr]
    14.       }
    15.     })()
    17.     dialogHeaderEl.onmousedown = (e) => {
    18.       // 鼠标按下，计算当前元素距离可视区的距离
    19.       const disX = e.clientX - dialogHeaderEl.offsetLeft
    20.       const disY = e.clientY - dialogHeaderEl.offsetTop
    22.       const screenWidth = document.body.clientWidth
    23.       const screenHeight = document.body.clientHeight
    25.       const minDragDomLeft = dragDom.offsetLeft
    26.       const maxDragDomLeft = screenWidth - dragDom.offsetLeft
    28.       const minDragDomTop = dragDom.offsetTop
    29.       const maxDragDomTop = screenHeight - dragDom.offsetTop
    31.       // 获取到的值带px 正则匹配替换
    32.       let styL = getStyle(dragDom, 'left')
    33.       let styT = getStyle(dragDom, 'top')
    35.       if (styL.includes('%')) {
    36.         styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
    37.         styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
    38.       } else {
    39.         styL = +styL.replace(/px/g, '')
    40.         styT = +styT.replace(/px/g, '')
    41.       }
    43.       document.onmousemove = function(e) {
    44.         // 通过事件委托，计算移动的距离
    45.         let left = e.clientX - disX
    46.         let top = e.clientY - disY
    48.         // 边界处理
    49.         if (-(left) > minDragDomLeft) {
    50.           left = -minDragDomLeft
    51.         } else if (left > maxDragDomLeft) {
    52.           left = maxDragDomLeft
    53.         }
    55.         if (-(top) > minDragDomTop) {
    56.           top = -minDragDomTop
    57.         } else if (top > maxDragDomTop) {
    58.           top = maxDragDomTop
    59.         }
    61.         // 移动当前元素
    62.         dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    63.       }
    65.       document.onmouseup = function(e) {
    66.         document.onmousemove = null
    67.         document.onmouseup = null
    68.       }
    69.     }
    70.   }
    71. }

    编辑外层使用的指令文件，取名叫el-drag-dialog.js

    1. import drag from './drag'
    3. const install = function(Vue) {
    4.   Vue.directive('el-drag-dialog', drag)
    5. }
    7. if (window.Vue) {
    8.   window['el-drag-dialog'] = drag
    9.   Vue.use(install); // eslint-disable-line
    10. }
    12. drag.install = install
    13. export default drag

    在vue组件中使用

    1. <el-dialog v-el-drag-dialog></el-dialog>
    1. import elDragDialog from '@/directive/el-drag-dialog'
    2. directives: { elDragDialog },