Issues with Implementing CDK Drag-and-Drop Sorting in Angular Multi-Select Dropdown

Question

I'm currently developing a feature within an Angular application that involves a custom multi-select dropdown component. The goal is to allow users to select multiple items from this dropdown and then reorder these selected items via drag and drop.
However, I've encountered a couple of challenges that I've been unable to resolve:

1. Incorrect Drop Index: Whenever an item is dragged and dropped, it predominantly ends up being placed at the beginning of the list (index 0), regardless of the intended drop location.
2. Static Placeholder: The placeholder that indicates where the item will be dropped does not move along with the dragged item, making it difficult for users to understand where the item will be placed upon release. I've spent a considerable amount of time trying to debug and fix these issues without success. I'm reaching out to the community for any suggestions, insights, or solutions that could help me overcome these hurdles.

Here's a link to a simplified version of my project on StackBlitz, which demonstrates the issues I'm facing: StackBlitz Example

Any advice or guidance on how to address these problems would be greatly appreciated. Thank you in advance for your time and help!

Answer 1

In your example on StackBlitz, you simply forgot to add the parameter cdkDropListOrientation="horizontal" to the cdkDropList div. (see example in documentation) Without this parameter, Angular interprets the position of the dragged object always as the first, since it expects a vertical container.