Wrong drop coordinates using transform (reactflow)

[chen665]

I am using react dnd kit with the library reactflow I wrapped the react flow with the DndContext

I added some logic, onDragMove, that moves the container of the reactflow when trying to drag to a target that is out of the screen. This is done by adding transform(translate) to the reactflow container. After the transform is added the draggable dropped on the wrong coordinates (another droppable)

here is an example:

https://github.com/clauderic/dnd-kit/assets/41868442/9135b1f4-51ae-4a57-b626-b3732c4e4bbe

• after dropping the draggable and pickup again this works right

Any help will be appreciated

[RJWadley]

if you're able to use native scrolling here i.e. (with overflow: auto), it should be able to handle recalculating those values and scrolling for you when dragging.

[collinsleewyatt]

I'm using React Flow in a project of mine. I was able to solve this issue by putting this in my measurement config in DndContext, which remeasures the dropzones every 16.667ms while dragging:

<DndContext
  measuring={{
    droppable: {
        frequency: 16.667,
        strategy: MeasuringStrategy.WhileDragging,
    },
  }}
/>

I'm manually setting the viewport with setViewport in useReactFlow(), which may or may not be the same way you're panning the viewport. If you're having problems with things being out of date until you move the cursor, I'd try MeasuringStrategy.Always.

[luunminh]

same trouble!