After dragging and releasing a link, the link activates

[xiemic]

Im currently trying to drag & drop links. After releasing the drag of the link, the link opens itself. Trying to prevent the link from opening via the isDragging prop does not work.

<a href={!isDragging ? 'link' : undefined}>...</a>

Does someone know how i can prevent this behavior?

The problem also appears in this example with onClicks: https://codesandbox.io/p/sandbox/dnd-kit-prevent-click-from-firing-gfh1z?file=%2Fsrc%2FSortableCard.jsx

[sbolanosQB]

same problem, the example doesn't work for me, every time I click isDragging becomes true

[johnmpotter]

Ran into this as well. I found that the best solution is to add a distance activation constraint. That delays the dragging until the user drags the cursor a certain number of pixels. You can just set your href as you usually do.

For me, at 20 pixels all the links worked as expected and the drag start also felt natural.

 const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 20,
      },
    }),
  );

Storybook: Minimum Distance – X Axis