I have Draggable element and inside of it, I have a component with onClick event. At the end of the drag, the click event is triggered. My draggable element looks like this. I used a package called react-draggable.
<Draggable
position={this.state.realPosition}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}
disabled={this.state.isDialogOpen}
bounds="parent">
<div style={{"width":"fit-content"}}>
<Helmet getDialogStatus={this.handleClick} />
</div>
</Draggable>
I have onClick event inside of the Helmet component which opens a dialog box. When I drag and release the element, this dialog opens. My question is how to prevent this action and how to seperate these to event?
Thanks.
I'd set a state in the Component holding Draggable
, isDragging
and pass it to Helmet component.
If isDragging then disable any click event.