Sorting mat-tab-group items using drag & drop

Question

I have a component that uses a mat-tab-group holding multiple mat-tab objects. While looking up how to add drag-and-drop capabilities to a list, the reigning answer seems to be using divs with cdkDropList and cdkDrag objects. I tried adding the cdkDropList tag to the mat-tab-group and adding cdkDrag to the mat-tabs, but the result appears to ignore the drag/drop capabilities. Is there a way to make this work, or am I just barking up the wrong tree?

Here's an example of the problem.

https://stackblitz.com/edit/angular-cdk-drag-drop-sjz9yx?file=app/cdk-drag-drop-connected-sorting-example.ts

Answer 1

Unfortunately, you can't simply add the cdkDrag on the mat-tab and expect it to work.

mat-tab itself is just a component that Material uses as a way for the consumers to pass in the content. Then mat-tab-group query the list of the mat-tab and project it back into the view.

As you can see that mat-tab doesn't exist in the HTML.

In order to drag&drop your tab header, you will need to implement your own tab. This will be a lot of work, so I am not going to implement one here.

Answer 2

I found the answer on GitHub. Miguel Rozalen posted a solution that basically amounts to "inside the tabs, create divs that hold the cdkDropList and cdkDrag elements, then link the droplists using cdkDropListConnectedTo". I've now updated the stackBlitz project to reflect it. gitHub Solution