el-dialog拖拽

最新推荐文章于 2024-09-05 11:08:38 发布

Zero0985

最新推荐文章于 2024-09-05 11:08:38 发布

阅读量118

点赞数

分类专栏： js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41742961/article/details/121976364

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

Vue.directive('dialogDrag', {
            bind(el, binding, vnode, oldVnode) {
              
                const dialogHeaderEl = el.querySelector('.el-dialog__header')
                const dragDom = el.querySelector('.el-dialog')
                
                dialogHeaderEl.style.cursor = 'move'
                dialogHeaderEl.onmousedown = (e) => {
                    const disX = e.clientX - dialogHeaderEl.offsetLeft
                    const disY = e.clientY - dialogHeaderEl.offsetTop
              
                    const dragDomWidth = dragDom.offsetWidth
                    const dragDomHeight = dragDom.offsetHeight
              
                    const screenWidth = document.body.clientWidth
                    const screenHeight = document.body.clientHeight
              
                    const minDragDomLeft = dragDom.offsetLeft
                    const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
              
                    const minDragDomTop = dragDom.offsetTop
                    const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
              
                    const styleLeftStr = getComputedStyle(dragDom).left
                    const styleTopStr = getComputedStyle(dragDom).top
                    if (!styleLeftStr || !styleTopStr) return
                    let styleLeft
                    let styleTop
                    if (styleLeftStr.includes('%')) {
                        styleLeft = +document.body.clientWidth * (+styleLeftStr.replace(/%/g, '') / 100)
                        styleTop = +document.body.clientHeight * (+styleTopStr.replace(/%/g, '') / 100)
                    } else {
                        styleLeft = +styleLeftStr.replace(/px/g, '')
                        styleTop = +styleTopStr.replace(/px/g, '')
                    }
              
                    document.onmousemove = (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 + styleLeft}px;top:${top + styleTop}px;`
                    }
              
                    document.onmouseup = () => {
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                }
            }
        })