crmeb/admin/src/directive/dialog/drag.js

/**
 * v-dialogDrag 弹窗拖拽（终极稳定版）
 * 解决：初始居中 + 按下闪烁、偏移错误、飞到右下角
 */
export default {
  bind(el, binding) {
    const value = binding.value
    if (value === false) return

    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')

    if (!dialogHeaderEl || !dragDom) return

    dialogHeaderEl.style.cursor = 'move'

    // 初始化：绝对居中
    dragDom.style.position = 'fixed'
    dragDom.style.margin = '0'
    dragDom.style.left = '50%'
    dragDom.style.top = '50%'
    dragDom.style.transform = 'translate(-50%, -50%)'

    // 鼠标按下
    dialogHeaderEl.onmousedown = (e) => {
      e.preventDefault()

      // 先拿到当前弹窗真实的 left / top（去掉 translate 影响）
      const currLeft = dragDom.getBoundingClientRect().left
      const currTop = dragDom.getBoundingClientRect().top

      // 按下瞬间立刻清除居中，重新设置真实 left top
      dragDom.style.transform = 'none'
      dragDom.style.left = currLeft + 'px'
      dragDom.style.top = currTop + 'px'

      // 计算正确偏移（这是唯一不飞的算法）
      const disX = e.clientX - currLeft
      const disY = e.clientY - currTop

      // 移动
      document.onmousemove = (e) => {
        let left = e.clientX - disX
        let top = e.clientY - disY

        dragDom.style.left = left + 'px'
        dragDom.style.top = top + 'px'
      }

      // 抬起
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}