Making a next.js Link element draggable.

[olasundell]

Hi.

In the process of upgrading Next.js from 12 -> 14 we need to switch from react-dnd. We chose Pragmatic since it seems really nice! We have, however, run into an issue:

  const ref = useRef<HTMLDivElement | null>(null);

  const [isDragging, setIsDragging] = useState(false);

  useEffect(() => {
    const element = ref.current;
    invariant(element);

    return draggable({
      element,
      onDragStart: () => {
        setIsDragging(true);
      },
      onDrop: () => setIsDragging(false),
      getInitialData(): { index: number } {
        return { index };
      },
    });

  });

  return (
    <div ref={ref}>
      <Link href={"https://www.svt.se"}>{index}</Link>
    </div>
  );

The above code gives us a link element where the draggable doesn't seem to be registered. Is this working as intended? Have we missed anything? We have checked the documentation but alas cannot find anything that would help us. Creating a horrible hack sophisticated solution by using onMouseUp and onMouseDown and saving pointer state seems to defeat the whole point of using a drag and drop library.

[olasundell]

This works when we set draggable={false} on the Link.