How to distinguish a click and a drag of a draggable element?

[tomish0]

Hi there, how do you distinguish between a click and a drag of a draggable element? The mouse sensor only returns onMouseDown which is called on drag and onClick. I need the two to work together since each draggable element has child elements that need to be clickable. How do I add the listener to the sensor or is there a way to create your own sensor all together?

[osamaashahi]

Adding activationConstraint to the sensor seems to do the trick

useSensor(PointerSensor, {
      activationConstraint: {
        distance: 5,
      },
    })

[tomish0]

Thanks for your response osamaashahi. I have actually found that adding the delay of 10 and tolerance of 0 actually works better than adding the distance constraint. Adding the delay means the onClick on my element is called before the pointer event and stopPropagation are called, without causing issues for the drag and drop. The distance constraint was causing issues for my drag and drop.

[RemyMachado]

Rather than relaying on activationContraint, you can use a custom sensor filtering on events and html data attributes.
Here's a great example.