问如何使反作用力带模态可拉？
EN

Stack Overflow用户

提问于 2019-10-01 03:36:17

回答 3查看 6.2K关注 0票数 3

如何使反应带模式可拖？我试过使用react-draggable插件，但它不能正常工作。它只是整个模态的内部部分。下面给出了我的代码。

如果我将< Draggable >组件使用到< Modal >标记的内部部分，那么它将被工作并移动标题文本和正文文本。如果有谁能帮我的话，应该是全模态的。

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

}

reactjs

modal-dialog

reactstrap

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-10-01 05:28:27

在给定的链接中发现了一些问题。

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

用ModalHeader & ModalBody包装Draggable是没有用的，只会造成令人发怒的行为。你得把它拿掉。

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

您的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属性。由于您已经在!important属性上应用了transform，此更新将没有任何效果，因此您的Modal不会被拖动。

因此，通过删除CSS of modal-dialog ，您的代码将运行。

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

您需要在您的项目bootstrap中添加(reactstrap只从引导获取CSS )，它将为Modal提供CSS，这样您就不需要编写自定义CSS。

npm i bootstrap --save

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

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

演示

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

票数 3

Stack Overflow用户

发布于 2021-05-31 04:50:11

是最简单的解决方案

您只需要用包装您的Modal代码就可以了

解决方案的步骤

使用NPM安装react-draggable包

npm i react-draggable

将react-draggable导入组件：

import Draggable from 'react-draggable';

用此reacstrap包装Draggable模式

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

票数 1

Stack Overflow用户

发布于 2022-04-13 04:32:05

我的解决方案是更好和非常简单，因为你可以拖模式，只有头，所以也是文本标记在模态内是可能的。

handle类名指定要用作启动拖动的句柄的选择器。

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>