diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index 76d8550bc22..efc0e9c3752 100644 --- a/src/cdk/drag-drop/drag-drop.md +++ b/src/cdk/drag-drop/drag-drop.md @@ -41,7 +41,7 @@ by referencing the `id` of another drop container: If you have an unknown number of connected drop lists, you can use the `cdkDropListGroup` directive to set up the connection automatically. Note that any new `cdkDropList` that is added under a group -will be connected to all other automatically. +will be connected to all other lists automatically. ```html
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css new file mode 100644 index 00000000000..81ffa9305f0 --- /dev/null +++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css @@ -0,0 +1,54 @@ +.example-container { + width: 400px; + max-width: 100%; + margin: 0 25px 25px 0; + display: inline-block; + vertical-align: top; +} + +.example-list { + border: solid 1px #ccc; + min-height: 60px; + background: white; + border-radius: 4px; + overflow: hidden; + display: block; +} + +.example-box { + padding: 20px 10px; + border-bottom: solid 1px #ccc; + color: rgba(0, 0, 0, 0.87); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + cursor: move; + background: white; + font-size: 14px; +} + +.cdk-drag-preview { + box-sizing: border-box; + border-radius: 4px; + 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); +} + +.cdk-drag-placeholder { + opacity: 0; +} + +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.example-box:last-child { + border: none; +} + +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html new file mode 100644 index 00000000000..edd8d80438e --- /dev/null +++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html @@ -0,0 +1,25 @@ +
+
+

To do

+ +
+
{{item}}
+
+
+ +
+

Done

+ +
+
{{item}}
+
+
+
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts new file mode 100644 index 00000000000..4bbbe1b1a0e --- /dev/null +++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts @@ -0,0 +1,38 @@ +import {Component} from '@angular/core'; +import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; + +/** + * @title Drag&Drop connected sorting group + */ +@Component({ + selector: 'cdk-drag-drop-connected-sorting-group-example', + templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html', + styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'], +}) +export class CdkDragDropConnectedSortingGroupExample { + todo = [ + 'Get to work', + 'Pick up groceries', + 'Go home', + 'Fall asleep' + ]; + + done = [ + 'Get up', + 'Brush teeth', + 'Take a shower', + 'Check e-mail', + 'Walk dog' + ]; + + drop(event: CdkDragDrop) { + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem(event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex); + } + } +}