Dragged items don't stay with mouse when zoomed in or out

[KevinMusgrave]

I'm using dnd-kit within react-flow, which provides a zoomable map environment.

At the default zoom level, dragging works fine. When zoomed in, the dragged item moves more than the mouse pointer. When zoomed out, the dragged item moves less than the mouse pointer.

Here's a sandbox where you can reproduce the issue: https://codesandbox.io/s/dnd-kit-react-flow-tcfed8

And here's a gif to illustrate:

Any suggestions for how to fix this? Would react-flow's internal transform state (pan and zoom values) be useful in this case?

[efossvold]

I solved it by using a modifier.

Hook to create the modifier (takes zoom/scale as an arg):

  export const useDragWithZoomModifier =
  (zoom: number): import('@dnd-kit/core').Modifier =>
  args => {
    const { transform } = args
    return {
      ...transform,
      x: transform.x / zoom,
      y: transform.y / zoom,
    }
  }

Then apply the modifier in the DndContext:

  ...
  const zoom = useZoom() // your own implementation to get zoom
  const transformer = useDragWithZoomModifier(zoom)

  useEffect(() => {
    setCanvasOffset([canvas.x, canvas.y])
  }, [canvas.x, canvas.y])

  return (
    <DndContext modifiers={[transformer]}>
   ...

[KevinMusgrave]

Thanks @efossvold that works! The only problem is that the other elements not being dragged don't seem to get this modifier applied. So the element being dragged follows the mouse now, but the other items getting re-arranged are still moving as if we're at the original zoom level.

[KevinMusgrave]

This worked (with useSortable: https://docs.dndkit.com/presets/sortable/usesortable#usage)

  function transformWithZoom(transform) {
    if (transform) {
      return {
        ...transform,
        x: transform.x / zoom,
        y: transform.y / zoom,
      };
    }
    return transform;
  }

  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({id});

  const scaledTransform = transformWithZoom(transform);

  const style = {
    transform: CSS.Transform.toString(scaledTransform),
    transition,
  };