[email protected]+vue3.0中dialog拖拽

又又又又有新需求

项目使用antdv@3.x+vue3.0+ts写的吧，拖拽网上也搜到了不少，实际用起来还是有点小问题。
这里参考了的博文https://blog.csdn.net/qq_41191777/article/details/122215491贴一下我自己改了改

上面链接遇到了点击dailog时，dialog突然贴左边，或者顶着左上角，又或者顶着上面的问题。修改之后又遇到了点击之后出现了贴边的情况。

下面我测试时OK的。

首先是新建了一个工具类我这里叫dragModal.ts，代码如下。

function dragModal() {
    let dialogHeaderEl = <HTMLImageElement>document.querySelector('.ant-modal-header')
    let dragDom = <HTMLImageElement>document.querySelector('.ant-modal')
    let styDom = <HTMLImageElement>document.querySelector('.ant-modal')
    let sty = styDom.style
    dialogHeaderEl.style.cursor = 'move'
    dialogHeaderEl.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const X = e.clientX //鼠标位置
        const Y = e.clientY
        const disX = e.clientX - e.offsetX //拖拽的dom所在位置
        const disY = e.clientY - e.offsetY
        //$(dragDom).css({ margin: '0px', left: disX, top: disY })
        dragDom.style.transform = 'translate(0px, 0px)'
        // 获取到的值带px 正则匹配替换
        let styL, styT, dragDomWidth, dragDomHeight

        //注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (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, '')
            styT = styT === 0 ? 100 : styT
            dragDomWidth = +sty.width.replace(/px/g, '')
            dragDomHeight = +sty.height.replace(/px/g, '')
        }
        document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - X
            const t = e.clientY - Y
            console.log(l, t, styL, styT)
            // 移动当前元素
            dragDom.style.left = `${l + styL}px`
            dragDom.style.top = `${t + styT}px`

        }

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

export default dragModal

vue中引入工具类，在dialog的visible设置为true后，在进行调用。这里试过没有setTimeout是不行的。大家有更好的办法，希望可以留言指教。🙏🙏

setTimeout(() => {
    dragModal()
  }, 1000)