cdkDropList events not triggered within a mat-table row

#### What is the expected behavior?
When the table row is set to cdkDropList it should treat cdkDrag items within the row as list items, reordering where necessary and triggering cdkDropListDropped on release

#### What is the current behavior?
mat-header-cells with the cdkDrag property inside a cdkDropList mat-header-row are behaving as if they are normal cdkDrag items without a cdkDropList.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-3x3fbt

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
9.1.3

#### Is there anything else we should know?
Similar issue: https://github.com/angular/components/issues/13770

Bắt đầu với bản tái hiện StackBlitz được liên kết và kiểm tra cách cdkDropList và cdkDrag tương tác bên trong một hàng tiêu đề mat-table. So sánh hành vi này với issue tương tự #13770 và xác minh liệu hàng đó có coi các thao tác kéo mat-header-cell là các mục trong danh sách hay không. Được xem là hoàn tất khi việc sắp xếp lại hoạt động và cdkDropListDropped được kích hoạt khi thả.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.