前端使用Ant Design中的Modal框实现长按顶部拖动弹框需求

需求：需要Ant Design中的一个Modal弹框，并且可以让用户按住顶部实现拖动操作

实现：在Ant Design的Modal框的基础上，在title中添加一个onMouseDown去记录拖拽的坐标，然后将其赋值给Modal的style属性

代码部分：

import { PureComponent } from 'react';
import { Modal } from 'antd';
class ZRJModal extends PureComponent {
  constructor(props) {
    super(props)
    //Modal 的初始值
    this.state = {
      styleTop: 100,
      styleLeft: 0,
    }
  }
  //计算是否超出屏幕;超出后
  inWindow = (left:any, top:any, startPosX:any, startPosY:any) => {
    let H = document.body.clientHeight;
    let W = document.body.clientWidth;
    if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||
      (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
      return false;
    }
    return true;
  }
  onMouseDown = (e:any) => {
    e.preventDefault();
    let startPosX = e.clientX;
    let startPosY = e.clientY;
    const { styleLeft, styleTop } = this.state;
    document.body.onmousemove = e => {
      let left = e.clientX - startPosX + styleLeft;
      let top = e.clientY - startPosY + styleTop;
      if (this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
        this.setState({
          styleLeft: left,
          styleTop: top,
        })
      }
    };
    //鼠标放开时去掉移动事件
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
    };
  };
  render() {
    const { styleLeft, styleTop } = this.state;
    const style = { left: styleLeft, top: styleTop }
    return <Modal
      title={<div style={{width:'100%',cursor:'move'}} onMouseDown={this.onMouseDown}>孜然卷弹框</div>}
      style={style}
      visible={this.state.RGZJvis}
      onOk={this.RGZJOK}
      okText={'保存'}
      width={650}
      onCancel={this.RGZJhandleCancel}
    >
      孜然卷内容
    </Modal >
  }
}
export default ZRJModal