[BUG] Scrolling while dragging to reorder offsets item from cursor

[alettsy]

1. Read the FAQs 👇

2. Describe the bug

When dragging an item to re-order, if you scroll while dragging, the item being dragged gets offset from the cursor position, despite the use of layoutScroll.

While the sandbox I have provided a link to is written with Vue, the issue is present in another project made with Next/React.

I apologize if I have simply just misunderstood the docs or missed something that fixes this problem! 😊

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Here is the sandbox. It is a modified fork of the example from the docs.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the sandbox
2. Click and hold to start dragging the first item
3. Scroll down
4. You should see the item get offset from the cursor

5. Expected behavior

The item being dragged should always follow the mouse cursor, even if scrolled.

6. Video or screenshots

I have a video of the same issue in another project (Next JS): video

In case you're interested, the other project issue is here, but I believe this is a motion issue now, based on my testing.

7. Environment details

I am testing in the latest Chrome browser on a Windows 11 Home desktop.

[damian-kociszewski]

It's annoying that

[Thayorns]

@mattgperry Hi! I'd like to clarify the situation with this issue. After spending some time studying the codebase, I came to the conclusion that the file /motion/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts is the starting point to implement the updates to fix #3275 issue. Am I understanding everything correctly?

[KYZNCODE-Sebastian-Roese]

Even the example at https://motion.dev/docs/react-reorder#scrollable-lists does this behaviour... unfortunately.

[alettsy]

Hi, @Thayorns 👋 have you made any progress towards a fix?

[Thayorns]

@alettsy, no i haven't, I didn't get any clarification regarding this https://github.com/motiondivision/motion/issues/3275#issuecomment-3141464019