antdv彈窗modal可拖動方法

你风致發表於2024-06-11
this.$nextTick(()=>{
        const modal:any = document.getElementsByClassName('ant-modal')[0]
        const content:any = document.getElementsByClassName('ant-modal-content')[0]
        let left = 0
        let top = 0
    
        // 設定遮罩層可滾動
        setTimeout(() => {
          document.body.style.width = '100%'
          document.body.style.overflowY = 'inherit'
        }, 0)
    
        // 滑鼠變成可移動的指示
        content.style.cursor = 'move'
    
        // top 初始值為 offsetTop
        top = top || modal.offsetTop
        content.onmousedown = e => {
          const startX = e.clientX
          const startY = e.clientY
          content.left = content.offsetLeft
          content.top = content.offsetTop
          document.onmousemove = event => {
            const endX = event.clientX
            const endY = event.clientY
            modal.left = content.left + (endX - startX) + left
            modal.top = content.top + (endY - startY) + top
            modal.style.left = modal.left + 'px'
            modal.style.top = modal.top + 'px'
          }
          document.onmouseup = event => {
            left = modal.left
            top = modal.top
            document.onmousemove = null
            document.onmouseup = null
            content.releaseCapture && content.releaseCapture()
          }
          content.setCapture && content.setCapture()
        }
      })

相關文章