React, How to prevent execution of click event after drag?

user_10891403 0
Viewed 5899

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.

reactjs draggable onclick drag-and-drop
3 Answers
const [isDragging, setIsDragging] = useState<any>(false);

const eventControl = (event: { type: any; }, info: any) => {


    if (event.type === 'mousemove' || event.type === 'touchmove') {
      setIsDragging(true)
    }

    if (event.type === 'mouseup' || event.type === 'touchend') {
      setTimeout(() => {
        setIsDragging(false);
      }, 100);

    }
  }

and then ,

<Draggable
    bounds="parent"
    onDrag={eventControl}
    onStop={eventControl}
> ...
user_111396490

I'd set a state in the Component holding Draggable, isDragging and pass it to Helmet component.

If isDragging then disable any click event.

user_61411970

Try to use event.stopPropagation(); in the this.handleDrag and this.handleStop event handlers by using event object. They may solve your problem.

user_146614820
Related