DropList created with DragDrop.createDropList is broken

[tornaia]

Reproduction

https://stackblitz.com/edit/angular-8-drag-and-drop-dynamic-components

Steps to reproduce:

1. Click on the add item a few times
2. Try to drag-and-drop these items

Expected Behavior

The order of the items can be changed

Actual Behavior

The order of the items remains always the same and the "dropped" event previousIndex and currentIndex properties have always the same value.

Environment

• Angular: 8.2.3
• CDK/Material: 8.1.4
• Browser(s): Chrome 76 (but its not a browser specific issue)
• Operating System: Windows

[crisbeto]

It looks like the issue is because we accidentally left the sortingDisabled flag on which means that sorting is disabled by default. It's not a problem for the drag&drop directives, because they override the setting. It'll be fixed by #16963, but until then you can work around it for your case by adding this.dropListRef.sortingDisabled = false.

[tornaia]

Hi @crisbeto,

Thank you for the prompt reply!

I've applied the suggested workaround and it looks a bit better now: the dropped event has now the correct previousIndex and currentIndex value - unfortunately the order of the items are still always the same - despite the use of moveItemInArray.

Please find here the updated repro case:
https://stackblitz.com/edit/angular-8-drag-and-drop-dynamic-components-with-workaround

[crisbeto]

The moveItemInArray only moves the items inside of your internal array, it won't move the elements in the DOM for you. Usually you'd have an ngFor that renders out the items so that when you change the data, Angular will move the items for you.

[tornaia]

I see now - thanks!

[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.}