diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index 87040e3a2b1..e0084c15864 100644 --- a/src/cdk/drag-drop/drag-drop.md +++ b/src/cdk/drag-drop/drag-drop.md @@ -172,7 +172,7 @@ be allowed into the new container. -### 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. + +### 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. + + diff --git a/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css b/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css new file mode 100644 index 00000000000..1e725e0ee13 --- /dev/null +++ b/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); +} diff --git a/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.html b/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.html new file mode 100644 index 00000000000..0b008e296c9 --- /dev/null +++ b/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.html @@ -0,0 +1,3 @@ +
+ Dragging starts after one second +
diff --git a/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts b/src/material-examples/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts new file mode 100644 index 00000000000..114859b5ce2 --- /dev/null +++ b/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 {}