Need help to move items inside a pannable container (autoscroll, overflow css, ... ?)

[ccreusat]

Hello everyone, hello @clauderic !

First of all, dnd-kit is one of the best dnd librairies (literally the best ;))

I'm trying to use it in a context with a Pan/Zoom container and to move items inside

Infos

• The PannableContent is 2880x1800, so bigger than the viewport (so we have overflow:hidden)
• Draggable Elements in blue
• When I drag items, I can drag them inside the whole pannable content and I use the restrictToParentElement
• Right now, I can "pan/move" the PannableContent, move inside it and I tried (in the first example below to restrict to the limits of the viewport) => PannableContent can't enter inside the viewport (for the users to know they can't go any further)

(can not enter the viewport)

What am I trying to achieve ?

When I drag an element, if it reaches the end of the viewport, the pannable content needs to translate (transform to CSS) to allow the dragged element to reach its end on both x/y axes (left/ right, up/down).

What I tried ?

• Translate the PannableContent programmatically but I lose the focus on the draggable items : codesandbox
• Use overflow with CSS but doesn't work properly because scrolls fit from viewport : codesandbox

So my questions are :

• Can I use DndKit correctly for this use case ?
• Is it possible to useautoScroll for this use case. If yes, I didn't understand how to use in my example
• I'm not good in calculating these things, so maybe there is a way with the onDragMove callback ?

Thank you in advance.. I tried to take a look at ReactFlow, but I think it's overkill for what I'm trying to achieve