chore(): updating drag&drop example

Author: chrum

src/app/app.component.html

@@ -165,9 +165,38 @@ <h3>Destroyed ng-container </h3>
 
 <div style="text-align: center">
     <h3>Drag & Drop :)</h3>
-    <textarea autosize cdkDrag>
-        I should be draggable and no be throwing errors in the process.
-    </textarea>
+
+    <div class="drag-and-drop-container">
+        <h2>To do</h2>
+
+        <div
+            cdkDropList
+            #todoList="cdkDropList"
+            [cdkDropListData]="todo"
+            [cdkDropListConnectedTo]="[doneList]"
+            class="drag-and-drop-list"
+            (cdkDropListDropped)="drop($event)">
+            <textarea class="drag-and-drop-box" *ngFor="let item of todo" cdkDrag
+                      autosize
+                      [(ngModel)]="item"></textarea>
+        </div>
+    </div>
+
+    <div class="drag-and-drop-container">
+        <h2>Done</h2>
+
+        <div
+            cdkDropList
+            #doneList="cdkDropList"
+            [cdkDropListData]="done"
+            [cdkDropListConnectedTo]="[todoList]"
+            class="drag-and-drop-list"
+            (cdkDropListDropped)="drop($event)">
+            <textarea class="drag-and-drop-box" *ngFor="let item of done" cdkDrag
+                      autosize
+                      [(ngModel)]="item"></textarea>
+        </div>
+    </div>
 </div>
 
 <hr/>

src/app/app.component.scss

@@ -25,3 +25,61 @@ textarea {
     padding-bottom: 15px;
   }
 }
+
+
+.drag-and-drop-container {
+    width: 200px;
+    max-width: 100%;
+    margin: 0 25px 25px 0;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.drag-and-drop-list {
+    border: solid 1px #ccc;
+    min-height: 60px;
+    background: white;
+    border-radius: 4px;
+    overflow: hidden;
+    display: block;
+}
+
+.drag-and-drop-box {
+    margin: 3px;
+    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; */
+    width: 189px;
+    min-width: auto;
+}
+
+.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);
+}
+
+.drag-and-drop-box:last-child {
+    border: none;
+}
+
+.drag-and-drop-list.cdk-drop-list-dragging .drag-and-drop-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup} from "@angular/forms";
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
 
 const longText = `Mega Man X, known in Japan as Rockman X,[a] is an action-platform video game developed and published by Capcom for the Super Nintendo Entertainment System (SNES).
         1
@@ -30,6 +31,15 @@ export class AppComponent implements OnInit {
 
     public showAreaInContainer = true;
 
+    public todo = [
+        'Get to work',
+        'Go home',
+    ];
+
+    public done = [
+        'Get up',
+    ];
+
     reactiveText = new FormControl(longText);
     reactiveForm = new FormGroup({
         reactiveText: new FormControl(longText)
@@ -62,4 +72,19 @@ export class AppComponent implements OnInit {
     onResized(newHeight) {
         console.log(newHeight);
     }
+
+
+
+    drop(event: CdkDragDrop<string[]>) {
+        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
+            );
+        }
+    }
 }