bug(CdkDragDrop): Behaviour changed in v9+

[Kotlin-Native]

I use a mat-table with reorderable columns. With v8 everything worked fine like in the attached stackblitz app. Since v9 it's broken. I reworked it to have the mat-table as base for cdkDropList. Drag and drop works again but in that case I have the problem that my column which is stickyEnd is also reorderable. I used cdkDragDisabled to avoid dragging it, but it's still possible to drag one of the other columns to the right position and replace it.

Expected Behavior

In Angular 8 I used CdkDragDrop in my mat-table like in that example:
https://stackblitz.com/edit/angular-mat-table-columns-draggable

Actual Behavior

Instead of replace a column with another the dragged object can now be placed everywhere and is no longer bound to the header row.
https://stackblitz.com/edit/angular-mat-table-columns-draggable-ugdwfw

Environment

• Angular: 9 - 10
• CDK/Material: 9 - 10
• Browser(s): Chrome/FF
• Operating System (e.g. Windows, macOS, Ubuntu): OSX

[crisbeto]

I'm having a hard time digging it up, but I'm guessing that in v8 we didn't have the SkipSelf here which allowed for the cdkDropList to be on the same element. This seems to have worked by accident due to the cdkDropListGroup that makes all of the headers behave as connected drop lists. In general we make assumptions that the DOM will look like this:

<group-element cdkDropListGroup> <!-- Optional -->
  <list-element cdkDropList>
    <drag-element cdkDrag></drag-element>
    <drag-element cdkDrag></drag-element>
  </list-element>

  <list-element cdkDropList>
    <drag-element cdkDrag></drag-element>
    <drag-element cdkDrag></drag-element>
  </list-element>
</group-element>

That being said, I think your use case is totally valid and it isn't currently possible, because you don't have access to put cdkDropList on a parent of a cdkDrag. We should make some changes so the drop list can be picked up either from the DOM hierarchy or through DI.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[2383CC4]

Hey @Kotlin-Native ,
do you have any solution for this yet? I need the same feature as well as I have a table with two columns that should be fixed.

[Kotlin-Native]

@2383CC4 Sorry no, after waiting a while we decided to drop that feature 😓