实现方案：

1. CSS3实现方案：

示例: Transform的translate实现，react代表组件库：react-draggable

import Draggable from 'react-draggable'

const DraggableModal: React.FC<
  ModalProps & {
  draggable?: boolean
}
> = ({modalRender, draggable, ...props}) => {
  return (
    <Modal
      modalRender={
        draggable !== false
          ? modal => (
            <Draggable handle=".ant-modal-header">
              {modalRender ? modalRender(modal) : modal}
            </Draggable>
          )
          : undefined
      }
      {...props}
    />
  )
}

export default DraggableModal

存在的问题: 如果内部有position:fixed布局的模块，会导致定位被降级为absolute，从而影响页面样式；

2. margin实现方案：

示例：创建dialogdrag.ts文件，引入到对应的弹出框文件中即可

let dragIng = false
let dragDom: HTMLElement | null
let dragPoint: { x: number, y: number }

document.addEventListener('mousedown', (ev: MouseEvent) => {
  let target = ev.target as HTMLElement
  if (!target.classList.contains('ant-modal-header') && !target.classList.contains('ant-modal-title') ) {
    return
  }
  dragDom = target.parentElement?.parentElement?.parentElement as HTMLElement
  if (dragDom.parentElement?.classList.contains('nodrag')) {
    dragDom = null
    return
  }
  dragIng = true
  dragPoint = {
    x: ev.clientX,
    y: ev.clientY
  }
})
document.addEventListener('mouseup', () => {
  dragIng = false
  dragDom = null
})
document.addEventListener('mousemove', (ev: MouseEvent) => {
  if (dragIng) {
    let _dragDom = dragDom as HTMLElement
    let sty = window.getComputedStyle(_dragDom, null)
    _dragDom.style.marginLeft = `${parseFloat(sty.marginLeft) + ev.clientX - dragPoint.x}px`
    _dragDom.style.marginTop = `${parseFloat(sty.marginTop) + ev.clientY - dragPoint.y}px`
    dragPoint = {
      x: ev.clientX,
      y: ev.clientY
    }
  }
})

export {}