Angular Material In Depth

Author: Your Name

src/app/drag-drop/drag-drop.component.html

@@ -1,12 +1,13 @@
 
-<div class="drag-drop-container">
+<div class="drag-drop-container" cdkDropListGroup>
 
   <div class="pending">
 
     <h3>Lessons To Watch:</h3>
 
     <div cdkDropList class="lessons-list drag-drop-list"
-        (cdkDropListDropped)="drop($event)">
+         [cdkDropListData]="lessons"
+        (cdkDropListDropped)="dropMultiList($event)">
 
         <div class="lesson drag-drop-item" *ngFor="let lesson of lessons" cdkDrag>
 
@@ -21,10 +22,25 @@ <h3>Lessons To Watch:</h3>
 
   </div>
 
-  <!-- div class="done">
+  <div class="done">
 
     <h3>Done:</h3>
 
-  </div-->
+      <div cdkDropList class="lessons-list drag-drop-list"
+           [cdkDropListData]="done"
+           (cdkDropListDropped)="dropMultiList($event)">
+
+          <div class="lesson drag-drop-item" *ngFor="let lesson of done" cdkDrag>
+
+              <div class="drop-placeholder" *cdkDragPlaceholder></div>
+
+              {{lesson.description}}
+
+          </div>
+
+      </div>
+
+
+  </div>
 
 </div>

src/app/drag-drop/drag-drop.component.ts

@@ -90,6 +90,26 @@ export class DragDropComponent {
     }
   ];
 
+  done = [];
+
+    dropMultiList(event: CdkDragDrop<Lesson[]>) {
+
+        if (event.previousContainer == event.container) {
+            moveItemInArray(this.lessons, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(
+                event.previousContainer.data,
+                event.container.data,
+                event.previousIndex,
+                event.currentIndex
+
+            );
+        }
+
+    }
+
+
     drop(event: CdkDragDrop<Lesson[]>) {
 
         console.log("previousIndex = ", event.previousIndex);