React 设置可拖动的 antd modal

Question

我正在尝试添加具有拖放功能的 antd modal。

import React, { Component } from "react";
import Draggable from "react-draggable";
import { Modal } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
  state = {
    disabled: false
  };

  render = () => {
    const { disabled } = this.state;
    return (
      <div className="container">
          <Modal visible>
          <Draggable>
          <div>
            <h4 style={{ height: 20, userSelect: "none" }}>
              {"Drag Me"}
            </h4>
            <textarea disabled={!disabled} className="uk-textarea" />

            <br />
            </div>
        </Draggable>
          </Modal>
      </div>
    );
  };
}

这是我的 sanbox 代码https://codesandbox.io/s/small-currying-j3emq，但似乎 ant modal 元素中的 react-draggable 不起作用，可能如果我可以设置元素 "ant-modal-content " 作为可拖动的元素，这是可行的。

有谁知道是否可以通过 props 将可拖动元素放入 react-draggable 中？

我也可以改包拖拽，我只需要能拖一个antd modal

Answer 1

只需将您的 <Draggable> 放在您的 <Modal> 中，而不是相反

    return (
      <div className="container">
        <Modal visible>
          <Draggable>
            <div>
              <h4 style={{ height: 20, userSelect: "none" }}>{"Drag Me"}</h4>
              <textarea disabled={!disabled} className="uk-textarea" />

              <br />
            </div>
          </Draggable>
        </Modal>
      </div>
    );