让 antd Model 变成可拖动弹窗

class Drag {
  constructor(id) {
    this.disX = 0;
    this.disY = 0;
    this.box = document.getElementsByClassName(id)[0];
    this.m = this.move.bind(this);
    this.u = this.up.bind(this)
  }
  init() {
    this.box.addEventListener("mousedown", this.down.bind(this));
    this.box.style.position = "absolute";
    this.box.style.left = (window.innerWidth - this.box.offsetWidth) / 2 + "px";
    return "绑定成功"
  }
  down(ev) {
    this.disX = ev.pageX - this.box.offsetLeft;
    this.disY = ev.pageY - this.box.offsetTop;
    document.addEventListener("mousemove", this.m);
    document.addEventListener("mouseup", this.u)
  }
  move(ev) {
    this.box.style.left = ev.pageX - this.disX + "px";
    this.box.style.top = ev.pageY - this.disY + "px";
    // 防止拖出窗口
    if (this.box.offsetLeft <= 0) {
      this.box.style.left = 0 + "px"
    }
    if (this.box.offsetLeft >= window.innerWidth - this.box.offsetWidth) {
      this.box.style.left = window.innerWidth - this.box.offsetWidth + "px"
    }
    if (this.box.offsetTop <= 0) {
      this.box.style.top = 0 + "px"
    }
    if (this.box.offsetTop >= window.innerHeight - this.box.offsetHeight) {
      this.box.style.top = window.innerHeight - this.box.offsetHeight + "px"
    }
  }
  up() {
    document.removeEventListener("mousemove", this.m);
    document.removeEventListener("mouseup", this.u);
  }
}

export default Drag

import React, { Component } from "react";
import { Button, Modal } from ‘antd‘;
import Drag from "../../utils/Drag";
let timer = null;

class secondPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
  };

  componentWillUnmount () {
    if (timer) {
      clearTimeout(timer)
    }
  }

  showModalFn = () => {
    this.setState({ showModal: true }, () => {
      timer = setTimeout(function () {
        new Drag("ant-modal").init();
      }, 0)
    })
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.showModalFn()} >show Modal</Button>
        <Modal
          visible={this.state.showModal}
        // onOk={this.handleOk}
        // onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    )
  }
}

export default secondPage