Angular Material In Depth

Author: Your Name

src/_mixins.scss

@@ -1,3 +1,5 @@
+
+
 @mixin drag-drop {
 
   .cdk-drag-preview {

src/app/app.component.html

@@ -15,6 +15,11 @@
                 <span>About</span>
             </a>
 
+            <a mat-list-item routerLink="drag-drop-example">
+                <mat-icon>drag_indicator</mat-icon>
+                <span>Drag and Drop</span>
+            </a>
+
             <a mat-list-item>
                 <mat-icon>person_add</mat-icon>
                 <span>Register</span>

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

@@ -5,6 +5,20 @@
 
     <h3>Lessons To Watch:</h3>
 
+    <div cdkDropList class="lessons-list"
+        (cdkDropListDropped)="drop($event)">
+
+        <div class="lesson" *ngFor="let lesson of lessons" cdkDrag>
+
+            <div class="drop-placeholder" *cdkDragPlaceholder></div>
+
+            {{lesson.description}}
+
+        </div>
+
+
+    </div>
+
   </div>
 
   <!-- div class="done">

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

@@ -1,4 +1,10 @@
 
+@import "../../mixins";
+
+
+@include drag-drop();
+
+
 .drag-drop-container {
   font-family: "Roboto";
   display: flex;

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

@@ -90,4 +90,13 @@ export class DragDropComponent {
     }
   ];
 
+    drop(event: CdkDragDrop<Lesson[]>) {
+
+        console.log("previousIndex = ", event.previousIndex);
+
+        console.log("currentIndex = " + event.currentIndex);
+
+        moveItemInArray(this.lessons, event.previousIndex, event.currentIndex);
+
+    }
 }