如何使反作用力带模态可拉？
如何使反应带模式可拖？我试过使用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>
);
}}
回答 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。
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>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>https://stackoverflow.com/questions/58184008
复制相似问题
腾讯云开发者
