bug(drag-drop): Drag and drop does not work with virtual scrolling lists

[RobinBomkamp]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hey there,

we want to use the drag and drop feature in a virtual scrolling list. But this is not working. Could you please provide some help?

Reproduction

StackBlitz link: https://stackblitz.com/edit/s6orkg?file=src%2Fexample%2Fcdk-virtual-scroll-overview-example.ts

Moving of an element to the bottom of the container, does not scroll down the container:

Steps to reproduce:

1. Move one item down to the bottom of the container.
2. The container should move down, but it does not.

Calculating the current and previous index of the element to move is based on the current viewed items not on the real index of the list.

1. Scroll to an element like Item Add README for card and button #100
2. Move the item down a few elements.
3. Look in the console: The logged event of cdkDropListDropped does not say that the element with the index 100 (or 99) should be moved, but the element with the index 6 for example should be moved to the index 9.

Expected Behavior

Drag and drop should work with virtual scrolling lists.

Actual Behavior

Serveral different issues according to the virtual scrolling and drag and drop.
For example showing elements on top of each other and calculating the index wrong.

Environment

• Angular: 17.3.0
• CDK/Material: 18
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Should be covered by #10122.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}