reactjs - 如何使 reactstrap 模态可拖动？

Question

如何使 reactstrap 模态可拖动？我尝试使用 react-draggable 插件，但它无法正常工作。它仅适用于整个模态的内部部分。我的代码如下。

如果我在 标签的内部部分使用 组件，那么它会起作用并移动标题文本和正文文本。如果有人请帮助我，它应该适用于整个模态。

import React, { Component } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import Draggable from "react-draggable";

class DraggableModal extends Component {
 render() {
    return (
      <div>
      <Draggable>
        <Modal
          isOpen={this.state.showModal}
          toggle={() => {
            this.setState({ showModal: false });
            this.props.modalClose();
          }}
        >
          <ModalHeader
            className="modal-header bg-primary modal-title text-white"
            toggle={() => {
              this.setState({ showModal: false });
              this.props.modalClose();
            }}
          >
            Test Header
          </ModalHeader>
          {this.state.loading ? <Spinner /> : ""}
          <ModalBody
            style={{
              height: modalSettings.modalBodyHeight + "px"
            }}
          >
            <div
              className="form-group row"             
            >
              <div className="formRow col-sm-12">{this.renderData()}</div>
            </div>
          </ModalBody>
        </Modal>
        </Draggable>
      </div>
    );
  }

Answer 1

在您给定的 link 中发现了一些问题.

您已经分别用 Draggable 包装了 Modal、ModalHeader 和 ModalBody。

用 Draggable 包装 ModalHeader 和 ModalBody 是没有用的，只会产生奇怪的行为。您需要将其删除。

您可能需要用 Draggable 包装您的 Modal。

---

由于 transform 属性，您的 Modal 没有被拖拽，

.modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    min-width: 500px !important;
}

在这里你应用了!important。

Draggable 仅在内部使用 transform 属性。当您用 Draggable 包装任何元素时，它将应用此 CSS，

touch-action: none;
transform: translate(0px, 0px);

并根据拖动/光标位置更新 transform 属性。由于您已经在 transform 属性上应用了 !important，因此此更新将无效，因此您的 Modal 将不会被拖动。

因此，通过删除 modal-dialog 的 CSS，您的代码将正常工作。

---

另一个建议是您已经为您的 Modal 编写了自定义 CSS。

你需要在你的项目中添加bootstrap(reactstrap takes CSS from bootstrap only)，这将为Modal提供CSS 这样您就不需要编写自定义 CSS。

npm i bootstrap --save

并且你可以在 index.js 文件中添加 bootstrap.min.css，例如，

import 'bootstrap/dist/css/bootstrap.min.css';

Demo

注意:如果您希望您的Modal位于屏幕中央，您可以为此添加自定义CSS。