反应集可拖动蚂蚁模态

Question

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

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” 作为可拖动元素起作用。

有人知道是否有可能通过道具将可拖动元素放置在react-draggable中吗？

我也可以更改软件包以进行拖放，我只需要能够拖动一个蚂蚁模态

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>
    );