draggable feature

will you support draggable feature in the near future, trying to use react-draggable with this component but dont get any joy, thanks

[diasbruno]

@Parlop did you found a way to solve this issue with react-draggable? this is seems a nice combination.

yes, I solved this issue with the library react-draggable(https://github.com/mzabriskie/react-draggable), it works like a charm, thanks!

[diasbruno]

Awesome! Thanks!

[yurkovoznyak]

@Parlop can you show your solution? I have the same problem.

[eldamir]

@Parlop Any details you can share to help the community? How did you make it work? We are having trouble with the Portal -> #45

[eldamir]

@diasbruno Maybe you have some insights? Otherwise, maybe we should reopen the issue?

[diasbruno]

@eldamir I was thinking about it and I don't think this is what a modal should do. I would recommend some kind of 'window', not a modal.

actually I made it work with a hack, you have to put draggable before a div content:

<Modal><Draggable><div className="whatever">content</div></Draggable></Modal>

It works for me and give it a high z-index
here's the code i used

 return (
      <div>
        <button style={buttonstyle} onClick={this.openModal}><i className="fa fa-search"></i>Search Json</button>
        <Modal
          contentLabel="????"
          className="Modal__Bootstrap modal-dialog"
          closeTimeoutMS={150}
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.handleModalCloseRequest}
          shouldCloseOnOverlayClick={false}
          style={customStyles}
        > <Draggable>
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" onClick={this.handleModalCloseRequest}>
                <span aria-hidden="true">&times;</span>
                <span className="sr-only">Close</span>
              </button>
              <h4 className="modal-title">Search Json </h4>
            </div>
            <div className="modal-body">
              <SearchModalComp closeMenu={this.closeMenu} {...this.props}/>
            </div>            
            <div className="modal-footer">
              <button type="button" className="btn btn-primary" onClick={this.handleSaveClicked}>Select</button>
              <button type="button" className="btn btn-default" onClick={this.handleModalCloseRequest}>Close</button>
            </div>
          </div></Draggable>
        </Modal>

      </div>
    );

[eldamir]

Thanks @Parlop , I'll give it a try

[austingayler]

Having trouble getting this working with react-draggable. It just drags the form inside:
http://i.imgur.com/iCRjZL5.png

Code:

        <Col sm={3}>
          <Modal>
            <Draggable>
              <div>
                <Modal.Body>
                  <ModalContentStuff {...this.props} closeAction={this.close.bind(this)} />
                </Modal.Body>
              </div>
            </Draggable>
          </Modal>
        </Col>

ModalContentStuff contains <Form><FormGroup>...

Any ideas?

[eldamir]

@Parlop @austingayler for me, this just resulted in the modal becoming an empty div, for some reason. The Draggable seems to ignore its children for some reason...