Make react-draggable work with React Bootstrap Modal

[cosminnicula]

Is there a way to make react-draggable work React Bootstrap Modal?

I'm thinking at something like this (btw..this doesn't work):

<Draggable handle=".modal-header">
    <Modal className="myClass" {...this.props} bsSize='small' title='Modal heading' animation={false}>
        <div className='modal-body'>
            <span>This is a test!</span>
        </div>
        <div className='modal-footer'>
            <Button>Close</Button>
        </div>
    </Modal>
</Draggable>

[STRML]

Please post a JSFiddle and elaborate on "doesn't work".

On 5/27/15 10:51 AM, Cosmin Nicula wrote:

Is there a way to make react-draggable work React Bootstrap Modal?

I'm thinking at something like this (btw..this doesn't work):

|
<Modal className="myClass" {...this.props} bsSize='small' title='Modal heading' animation={false}>

This is a test!

Close

|

—
Reply to this email directly or view it on GitHub
#56.

[cosminnicula]

Have a look at this Gist https://gist.github.com/cosminnicula/4fb7bcbf43d0e9f0271a

P.S. I'm using Webpack which outputs bundle.js and vendors.js. In vendors.js will be libraries like react, react-bootstrap and react-draggable

Let me know if you have any more questions.

[STRML]

Please import this into a jsfiddle so it can be run in the browser, or
submit a full working example in a repository that can be cloned and used.

On 5/27/15 11:05 AM, Cosmin Nicula wrote:

Have a look at this Gist
https://gist.github.com/cosminnicula/4fb7bcbf43d0e9f0271a

P.S. I'm using Webpack which outputs bundle.js and vendors.js. In
vendors.js will be libraries like react, react-bootstrap and
react-draggable

Let me know if you have any more questions.

—
Reply to this email directly or view it on GitHub
#56 (comment).

[cosminnicula]

I've create a repository here https://github.com/cosminnicula/ReactBootstrapModalDraggable

[STRML]

Okay.

It seems this is a limitation of the Modal code and won't be possible without a modification to React-Bootstrap.

The issue is the render(), which renders the Modal and its full-page backdrop:

<div
  {...this.props}
  title={null}
  tabIndex="-1"
  role="dialog"
  style={modalStyle}
  className={classNames(this.props.className, classes)}
  onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
  ref="modal">
  {/* Draggable should be inserted here */}
  <div className={classNames(this.props.dialogClassName, dialogClasses)}>
    <div className="modal-content">
      {this.props.title ? this.renderHeader() : null}
      {this.props.children}
    </div>
  </div>
</div>

There should be an option to include a wrapper component here or otherwise replace the <div> with a custom component.

[STRML]

Closing as this is not a React-draggable issue but rather a React-bootstrap issue.

[burgalon]

For anyone who might bump in this and would like to have a draggable react-bootstrap dialog, I made a GIST.
https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503

[eldamir]

Thanks @burgalon , This may help me build a similar solution for react-modal (react-modal#45, react-modal#232)