如何使 reactstrap 模态可拖动？

Question

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

如果我使用 < Draggable > 组件到 < Modal > 标签的内部部分然后它工作并移动 header 文本以及 body 文本。如果有的话，它应该适用于整个模态body请帮助我。

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 中发现了一些问题。

您已将 Modal、ModalHeader 和 ModalBody 分别包装为 Draggable。

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

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

你的 Modal 没有被拖拽，因为 transform 属性,

.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 仅从 bootstrap 获取 CSS），这将提供 CSS for Modal 这样你就不需要写自定义 CSS.

npm i bootstrap --save

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

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

Demo

注意：如果您希望 Modal 位于屏幕中央，您可以添加自定义 CSS.

Answer 2

有史以来最简单的解决方案

您只需要 用 Draggable

包裹您的 Modal 代码

求解步骤:

使用 NPM 安装 react-draggable 包

npm i react-draggable

将 react-draggable 导入您的组件：

import Draggable from 'react-draggable';

用这个Draggable包装你reacstrap模态：

<Draggable>
  <Modal
    isOpen={this.props.isModalOpen}
    toggle={this.props.toggleModal}
    className="gray-header-modal md"
  >
    <ModalHeader>
      <label className="modal-header-title text-dark">Modal Title</label>
      <img
        src="/images/close.png"
        alt="close"
        width="20px"
        className="closeIcon"
        onClick={this.props.toggleModal}
      />
    </ModalHeader>
    <ModalBody>
      <Row>
        <Col>
          // Modal body
        </Col>
      </Row>
    </ModalBody>
  </Modal>
</Draggable>

Answer 3

我的解决方案更好而且非常简单，因为您只能使用 header 拖动模态框，因此也可以在模态框内标记文本。

handle class 名称指定了一个选择器，用作启动拖动的句柄。

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

...

<Draggable handle=".handle">
  <Modal size="lg" toggle={function noRefCheck(){}}>
    <ModalHeader toggle={function noRefCheck(){}} className="handle">
      Modal Title
    </ModalHeader>
    <ModalBody>
      Modal Body
    </ModalBody>
  </Modal>
</Draggable>

如何使 reactstrap 模态可拖动？

How to make reactstrap modal draggable?

modal-dialog

reactjs

reactstrap