antd modal拖拽，自定义modal拖拽react-draggable

"antd": "^4.9.4"时，可以直接使用如下代码：

import React, { Component } from "react";
import { Modal, Button } from 'antd';
import Draggable from 'react-draggable';
class Drag extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      disabled: true,
      bounds: { left: 0, top: 0, bottom: 0, right: 0 },
    };
  }
  draggleRef = React.createRef();

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  onStart = (event, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = this.draggleRef?.current?.getBoundingClientRect();
    this.setState({
      bounds: {
        left: -targetRect?.left + uiData?.x,
        right: clientWidth - (targetRect?.right - uiData?.x),
        top: -targetRect?.top + uiData?.y,
        bottom: clientHeight - (targetRect?.bottom - uiData?.y),
      },
    });
  };
  render() {
    const { bounds, disabled, visible } = this.state;
    return (
      <>
        <Button onClick={this.showModal}>Open Draggable Modal</Button>
        <Modal
          title={
            <div
              style={{
                width: '100%',
                cursor: 'move',
              }}
              onMouseOver={() => {
                if (disabled) {
                  this.setState({
                    disabled: false,
                  });
                }
              }}
              onMouseOut={() => {
                this.setState({
                  disabled: true,
                });
              }}
              // fix eslintjsx-a11y/mouse-events-have-key-events
              // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
              onFocus={() => {}}
              onBlur={() => {}}
              // end
            >
              Draggable Modal
            </div>
          }
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          modalRender={modal => (
            <Draggable
              disabled={disabled}
              bounds={bounds}
              onStart={(event, uiData) => this.onStart(event, uiData)}
            >
              <div ref={this.draggleRef}>{modal}</div>
            </Draggable>
          )}
        >
          <p>
            Just don&apos;t learn physics at school and your life will be full of magic and
            miracles.
          </p>
          <br />
          <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
        </Modal>
      </>
    );
  }
}
export default Drag;

"antd": "^3.26.16"，低版本antd无法实现拖拽，所以我自己写了一个modal，下面为完整代码

import React, { Component } from "react";
import { Button, Icon } from 'antd';
import Draggable from 'react-draggable';
import "./Draggable.css";
class Drag extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    this.setState({
      visible: false,
    });
  };
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  render() {
    const { visible } = this.state;
    return (
      <>
        <Button onClick={this.showModal}>Open Draggable Modal</Button>
          {visible&&<div className="drag_modal_container">
            <div className="drag_modal_mask"></div>
            <div className="drag_modal_wrap">
              <Draggable>
                <div className="drag_modal">
                  <div className="drag_modal_content">
                    <button className="drag_modal_close">
                      <span className="drag_modal_close_icon">
                      <Icon type="close" onClick={this.handleCancel}/>
                      </span>
                    </button>
                    <div className="drag_modal_header">
                      <div className="drag_modal_title">Draggable Modal</div>
                    </div>
                    <div className="drag_modal_body">
                      <p>
                        Just don&apos;t learn physics at school and your life will be full of magic and
                        miracles.
                      </p>
                      <br />
                      <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
                    </div>
                    <div className="drag_modal_footer">
                      <Button onClick={this.handleCancel}>Cancel</Button>
                      <Button type="primary" className="drag_right_button" onClick={this.handleOk}>OK</Button>
                    </div>
                  </div>
                </div>
              </Draggable>
            </div>
          </div>
        }
      </>
    );
  }
}
export default Drag;

Draggable.css

.drag_modal_container{
    cursor: move;
}
.drag_modal_mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
}
.drag_modal_wrap{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    outline: 0;
}
.drag_modal{
    width: 520px;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    position: relative;
    top: 100px;
    margin: 0 auto;
    padding-bottom: 24px;
    pointer-events: none;
}
.drag_modal_content{
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    pointer-events: auto;
}
.drag_modal_close{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;
}
.drag_modal_close_icon{
    display: block;
    width: 56px;
    height: 56px;
    font-size: 16px;
    font-style: normal;
    line-height: 56px;
    text-align: center;
    text-transform: none;
    text-rendering: auto;
}
.drag_modal_header{
    padding: 16px 24px;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 4px 4px 0 0;
}
.drag_modal_title{
    margin: 0;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
.drag_modal_body{
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
}
.drag_modal_footer{
    padding: 10px 16px;
    text-align: right;
    background: transparent;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
}
.drag_right_button{
    margin-left: 8px;
}