docs(chips): add drag and drop sample (#15276)

* docs(chips): add drag and drop sample

Closes #13215

* docs(chips): fix tslint erros drag and drop sample

Closes #13215

* docs(chips): fix space indentations and apply animation

drag&drop fix spaces indentation and apply animation

Closes #15276

* docs(chips): fix lint errors

Closes #15276

* docs(chips): wrap drag animations within another class

Closes #13215

* fix(chips): add title drag and drop example

Closes #13215

* fix(chips-drag-drop): fix lint errors

Closes #13215

Author: Aleksandyr

src/material-examples/chips-drag-and-drop/chips-drag-drop-example.css

@@ -0,0 +1,7 @@
+.example-box.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-chip .cdk-drop-list-dragging {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/material-examples/chips-drag-and-drop/chips-drag-drop-example.html

@@ -0,0 +1,12 @@
+<mat-chip-list
+  class="example-chip"
+  cdkDropList 
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)">
+  <mat-chip
+    class="example-box"
+    cdkDrag
+    *ngFor="let vegetable of vegetables">
+    {{vegetable.name}}
+  </mat-chip>
+</mat-chip-list>

src/material-examples/chips-drag-and-drop/chips-drag-drop-example.ts

@@ -0,0 +1,29 @@
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
+
+export interface Vegetable {
+  name: string;
+}
+
+/**
+ * @title Chips Drag and Drop
+ */
+@Component({
+  selector: 'chips-drag-drop-example',
+  templateUrl: 'chips-drag-drop-example.html',
+  styleUrls: ['chips-drag-drop-example.css']
+})
+export class ChipsDragDropExample {
+  vegetables: Vegetable[] = [
+    {name: 'apple'},
+    {name: 'banana'},
+    {name: 'strawberry'},
+    {name: 'orange'},
+    {name: 'kiwi'},
+    {name: 'cherry'},
+  ];
+
+  drop(event: CdkDragDrop<Vegetable[]>) {
+    moveItemInArray(this.vegetables, event.previousIndex, event.currentIndex);
+  }
+}