docs(cdk/drag-drop): add tabs example (#29517)

Adds an example that shows how to add drag&drop support to a `mat-tab-group`.

Fixes #13572.

(cherry picked from commit 67f9a29)

Author: crisbeto

src/cdk/drag-drop/drag-drop.md

@@ -251,10 +251,13 @@ item will be moved into the new index, otherwise it will keep its current positi
 
 <!-- example(cdk-drag-drop-sort-predicate) -->
 
-### Reordering table rows
-Angular Material provides seamless integration of drag-and-drop functionality into tables,
-by adding the `cdkDropList` directive to your mat-table and handling the `(cdkDropListDropped)`
-event, you can enable drag-and-drop interactions within your table. This allows users to reorder
-rows or perform other custom actions with ease.
+### Integrations with Angular Material
+The CDK's drag&drop functionality can be integrated with different parts of Angular Material.
 
+#### Sortable table
+This example shows how you can set up a table which supports re-ordering of tabs.
 <!-- example(cdk-drag-drop-table) -->
+
+#### Sortable tabs
+Example of how to add sorting support to a `mat-tab-group`.
+<!-- example(cdk-drag-drop-tabs) -->

src/components-examples/cdk/drag-drop/BUILD.bazel

@@ -15,6 +15,7 @@ ng_module(
         "//src/cdk/portal",
         "//src/material/icon",
         "//src/material/table",
+        "//src/material/tabs",
     ],
 )
 

src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css

@@ -0,0 +1,17 @@
+.example-drag-tabs.cdk-drop-list-dragging {
+  pointer-events: none;
+}
+
+.example-drag-tabs-preview.cdk-drag-animating {
+  transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mat-mdc-tab.example-drag-tabs-preview {
+  outline: dashed 1px #ccc;
+  outline-offset: 4px;
+}
+
+.example-drag-tabs .cdk-drag-placeholder {
+  opacity: 0.5;
+}
+

src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html

@@ -0,0 +1,27 @@
+<mat-tab-group
+  cdkDropList
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)"
+  cdkDropListElementContainer=".mat-mdc-tab-labels"
+  class="example-drag-tabs"
+  [(selectedIndex)]="selectedTabIndex"
+  animationDuration="0">
+  @for (tab of tabs; track $index) {
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span
+          cdkDrag
+          cdkDragPreviewClass="example-drag-tabs-preview"
+          cdkDragRootElement=".mat-mdc-tab">{{tab}}</span>
+      </ng-template>
+
+      <h3>Content for {{tab}}</h3>
+
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus
+      reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente
+      voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto
+      nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo
+      labore sapiente cum alias nobis!
+    </mat-tab>
+  }
+</mat-tab-group>

src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts

@@ -0,0 +1,25 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
+import {MatTabsModule} from '@angular/material/tabs';
+
+/**
+ * @title Drag&Drop tabs
+ */
+@Component({
+  selector: 'cdk-drag-drop-tabs-example',
+  templateUrl: 'cdk-drag-drop-tabs-example.html',
+  styleUrl: 'cdk-drag-drop-tabs-example.css',
+  standalone: true,
+  imports: [CdkDrag, CdkDropList, MatTabsModule],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CdkDragDropTabsExample {
+  protected tabs = ['One', 'Two', 'Three', 'Four', 'Five'];
+  protected selectedTabIndex = 0;
+
+  drop(event: CdkDragDrop<string[]>) {
+    const prevActive = this.tabs[this.selectedTabIndex];
+    moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
+    this.selectedTabIndex = this.tabs.indexOf(prevActive);
+  }
+}

src/components-examples/cdk/drag-drop/index.ts

@@ -17,3 +17,4 @@ export {CdkDragDropSortingExample} from './cdk-drag-drop-sorting/cdk-drag-drop-s
 export {CdkDragDropSortPredicateExample} from './cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example';
 export {CdkDragDropTableExample} from './cdk-drag-drop-table/cdk-drag-drop-table-example';
 export {CdkDragDropMixedSortingExample} from './cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example';
+export {CdkDragDropTabsExample} from './cdk-drag-drop-tabs/cdk-drag-drop-tabs-example';