How to make reactstrap modal draggable?

Question

how to make reactstrap modal draggable? I have tried by using react-draggable plugin but it is not working properly. It is work only inner section of whole modal. My code is given below.

if i use < Draggable > component into inner section of < Modal > tag then it is worked and move header text as well as body text. it should be worked for whole modal if anybody there please help me.

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

Found some issue's in your given link.

You have wrapped Modal, ModalHeader & ModalBody with Draggable separately.

Wrapping ModalHeader & ModalBody with Draggable is of no use and will only create weired behaviour. You need to remove it.

You probably obly need to wrap your Modal with Draggable.

---

Your Modal is not getting dragged because of the transform property,

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

Here you have applied !important.

The Draggable internally work with transform property only. When you wrap any element with Draggable, it will apply this CSS,

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

And on the basis of drag / cursor position it will update the transform property. As you have alreay applied !important on transform property, this update will have no effect and in result your Modal will not get dragged.

So, by removing CSS of modal-dialog your code will work.

---

Another suggestion is you have written custom CSS for your Modal.

You need to add bootstrap in your project (reactstrap takes CSS from bootstrap only), which will provide CSS for Modal so that you don't need to write custom CSS.

npm i bootstrap --save

And you can add bootstrap.min.css in index.js file like,

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

Demo

Note: If you want your Modal at center of screen, for that you can add custom CSS.