Как сделать реактивный ремень модальным перетаскиваемым?

Question

как сделать реагирующий ремень модальным перетаскиваемым? Я попытался с помощью реагировать-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

Найдены некоторые проблемы в указанной вами ссылке .

Вы завернули Modal, ModalHeader & ModalBody с Draggable отдельно.

Обтекание ModalHeader & ModalBody с Draggable бесполезно и создаст только утомленное поведение. Вам нужно удалить его.

Возможно, вам необходимо обернуть Modal с помощью 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 из modal-dialog ваш код будет работать.

---

Еще одно предложение - вы написали пользовательский CSS для своего Modal.

Вам нужно добавить bootstrap в ваш проект (actstrap берет CSS только из начальной загрузки) , что обеспечит CSS для Modal, так что вам не нужно писатьcustom CSS.

npm i bootstrap --save

И вы можете добавить bootstrap.min.css в index.js файл, например,

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

Демо

Примечание: Если вы хотите, чтобы ваш Modal находился в центре экрана, для этого вы можете добавить пользовательский CSS.