docs(drag-drop): add docs and live example for delay input (#15370)

Adds some docs and a live example for the `cdkDragStartDelay` input. Follow-up from #14732.

**Note:** targeting `major`, because the PR that introduces the functionality was merged into the next major branch.

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

@@ -172,7 +172,7 @@ be allowed into the new container.
 
 <!-- example(cdk-drag-drop-enter-predicate) -->
 
-### Disable dragging
+### Disabled dragging
 If you want to disable dragging for a particular drag item, you can do so by setting the
 `cdkDragDisabled` input on a `cdkDrag` item. Furthermore, you can disable an entire list
 using the `cdkDropListDisabled` input on a `cdkDropList` or a particular handle via
@@ -188,3 +188,13 @@ in addition to preserving the dragged item's initial position in the source list
 decides to return the item.
 
 <!-- example(cdk-drag-drop-disabled-sorting) -->
+
+### Delayed dragging
+By default as soon as the user puts their pointer down on a `cdkDrag`, the dragging sequence will
+be started. This might not be desirable in cases like fullscreen draggable elements on touch
+devices where the user might accidentally trigger a drag as they're scrolling the page. For
+cases like these you can delay the dragging sequence using the `cdkDragStartDelay` input which
+will wait for the user to hold down their pointer for the specified number of milliseconds before
+moving the element.
+
+<!-- example(cdk-drag-drop-delay) -->

src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css

@@ -0,0 +1,25 @@
+.example-box {
+  width: 200px;
+  height: 200px;
+  border: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: move;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #fff;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.example-box:active {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}

src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.html

@@ -0,0 +1,3 @@
+<div class="example-box" cdkDrag [cdkDragStartDelay]="1000">
+  Dragging starts after one second
+</div>

src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Delayed dragging
+ */
+@Component({
+  selector: 'cdk-drag-drop-delay-example',
+  templateUrl: 'cdk-drag-drop-delay-example.html',
+  styleUrls: ['cdk-drag-drop-delay-example.css'],
+})
+export class CdkDragDropDelayExample {}