4

I'm successfully using react-dnd in a react component for a requirement of the application I'm working on.

Said component also has a button that show a simple modal window:

<Modal show={this.props.show} onHide={this.props.onHide} id={'image-modal'} {...this.props}  animation={true}>
      ...
      <Modal.Body>
          <div id="drop-target" onDragOver={this.handleDrag} onDrop={this.handleDrop}>
            <div className="text-center"><p>Put your image here</p></div>
          </div>
      </Modal.Body>
      ...
    </Modal>

As you can see, this modal contains a div element that is listening for native html drag and drop events. My problem is that apparently these native events are somehow being overwritten for react-dnd, rendering them useless.

I tested by eliminating all reeact-dnd drop target from the component and as I expected, the native events are now working. How can I achieve the behavior I'm expecting?

Daniel Calderon Mori
  • 5,466
  • 6
  • 26
  • 36

0 Answers0