react+js 封装 可拖动弹框 无遮罩层

在antd的弹框下进行二次封装可拖动弹框时 用属性可以去掉遮罩层 但是弹框下面内容还是不能点击 所以下面封装了一个js写的弹框 

简单实现点击按钮时出现弹框 可拖动 无遮罩层 拖到旁边后页面弹框下面的页面功能还可以点击

其中有实现EventBus监听点击到侧边栏 弹框会自动关闭 不需要可以去掉

实现移动的事件是 onMouseDown （下面代码中的事件名）

下面是整体代码：

import React, { Component } from "react";
import { Button } from "antd";
import { CloseOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import EventBus from "@/utils/EventBus";
import Instructions from "../OIComponent/Instructions.jsx";
import { instructions } from "@/utils/commonMethod";
import "./styles.less";

let doubleChapter = [
  "两两比较差异分析/单变量统计分析",
  "两两比较差异分析/多元统计OPLS-DA分析",
  "两两比较差异分析/差异物质筛选"
];
let mutliChapter = [
  "多组比较差异分析/多组比较分析",
  "多组比较差异分析/多元统计PLS-DA分析",
  "多组比较差异分析/差异物质筛选"
];
let isRecursive = false;
let chapterTitle = [];

class MoveModal extends Component {
  constructor(props) {
    super(props); // Modal 的初始值
    this.state = {
      isShow: false,
      styleTop: 0,
      styleLeft: 0,
      instructsArr: {},
      chapterData: {},
      isRecursive: false
    };
  }

  componentDidMount() {
    let pathnameArr = window.location.pathname.split("/");

    pathnameArr[2] === "TwogroupDiffAnalysis"
      ? (chapterTitle = doubleChapter)
      : (chapterTitle = mutliChapter);

    if (pathnameArr[3] === "diffStat" || pathnameArr[3] === "multidiffStat") {
      isRecursive = true;
    } else {
      isRecursive = false;
    }

    EventBus.addEventListener("analysisRequire", this.modalChange);
  }
  componentWillUnmount() {
    EventBus.removeEventListener("analysisRequire", this.modalChange);
  }

  modalChange = () => {
    this.setState({
      isShow: false
    });
  };

  onMouseDown = (e) => {
    let el = e.currentTarget;
    let dx = e.clientX - el.offsetLeft;
    let dy = e.clientY - el.offsetTop;

    document.onmousemove = (e) => {
      let x = e.clientX - dx;
      let y = e.clientY - dy;
      el.style.left = x + 360 + "px";
      el.style.top = y + "px";
    };
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  showModal = () => {
    EventBus.dispatchEvent("analysisRequire", {});
    let data = sessionStorage.getItem("analysisRequire") || "";
    this.setState({
      isShow: !this.state.isShow,
      instructsArr: instructions(isRecursive, chapterTitle)
    });
  };

  render() {
    const { styleLeft, styleTop, isShow } = this.state;
    const style = { left: styleLeft, top: styleTop };

    return (
      <div className="draggable-modal-body">
        <Button onClick={this.showModal} className="draggable-modal-button">
          <QuestionCircleOutlined style={{ fontSize: 16 }} />
          <span className="draggable-modal-text">使用说明</span>
        </Button>
        {isShow === true ? (
          <div className="draggable-madal-box" onMouseDown={this.onMouseDown}>
            <div className="draggable-madal-close" onClick={this.showModal}>
              <CloseOutlined className="icon-style" />
            </div>
            <Instructions instructsArr={this.state.instructsArr} />
          </div>
        ) : null}
      </div>
    );
  }
}
export default MoveModal;

然后页面引用组件使用即可

效果：（已经拖动过得）

 拖动后依然可以点击旁边的下拉框