el-dialog拖拽，边界问题完全修正，网上版本的bug修复

前言​

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！

欢迎大家关注我的知识库，Java之从零开始·语雀

你的关注就是我前进的动力！

CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。

需求

可拖拽、边界问题。
​
修改点

原因

看图说话，这个offsetHeight边距是盒子的距离，可是我们把这个盒子计算进去了，多算了高度，致使弹出框跑出了页面。

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

export default {
    
  bind(el, binding, vnode) {
    
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function() {
    
      if (window.document.currentStyle) {
    
        return (dom, attr) => dom.currentStyle[attr]
      } else {
    
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
    
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')

      if (styL.includes('%')) {
    
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
    
        styL = +styL.replace(/px/g, '')
        styT = +styT.replace(/px/g, '')
      }

      document.onmousemove = function(e) {
    
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界处理
        if (-(left) > minDragDomLeft) {
    
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
    
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
    
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
    
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${
      left + styL}px;top:${
      top + styT}px;`
      }

      document.onmouseup = function(e) {
    
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

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

import drag from './drag'

const install = function(Vue) {
    
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
    
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}

drag.install = install
export default drag

在vue组件中使用

<el-dialog v-el-drag-dialog></el-dialog>

import elDragDialog from '@/directive/el-drag-dialog'
directives: {
     elDragDialog },

参考链接：https://blog.csdn.net/weixin_46074961/article/details/106905396