Implement long Press for Drag, click for other logic

[omar-shahid]

I want to implement a primary feature:

1. If the user long press the mouse button, trigger the drag.
2. If the user does a simple click, handle it using the onClick event.

[rayronvictor]

You can use Activation Constraints for that https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints

[chaodonghu]

This might be similar to the question asked in #329 -> https://github.com/clauderic/dnd-kit/issues/329#issuecomment-860054645

You can utilize a Activation Constraint on the default PointerSensor

[omar-shahid]

Thanks @chaodonghu, but how can I use two sensors at a time for the same element? One sensor for click and drag, other for long click and drag.

[chaodonghu]

Thanks @chaodonghu, but how can I use two sensors at a time for the same element? One sensor for click and drag, other for long click and drag.

@theJsTsGuy I'm not sure you'll be able to have two separate sensors for the same interaction. To answer your original question your use case might be similar to what I'm trying to implement I have an element that has nested children which implements its own onClick events (eg. Checkbox, dropdown) but I want to be able to click and drag that element as well.

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        // Require pointer to move by 5 pixels before activating draggable
        // Allows nested onClicks/buttons/interactions to be accessed
        distance: 5,
      },
    })
  );

Something like this or

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        delay: 250,
        tolerance: 5,
      },
    }),
  );

[lei0gre]

@chaodonghu amazing man, solve my problem!

[SuhaibMaraqa]

Amazing!!

[aurels]

You made my day @chaodonghu 🙏