started implementing two list drag and drop

Author: rita7elyz

src/app/app-routing.module.ts

@@ -5,8 +5,8 @@ import { AdminFormManageEventComponent } from './components/admin-form-manage-ev
 
 
 const routes: Routes = [
-  { path: 'admin-create', component: AdminFormCreateEventComponent },
-  { path: 'admin-manage', component: AdminFormManageEventComponent}
+  { path: 'new/advertisingconfig', component: AdminFormCreateEventComponent },
+  { path: 'manage/advertisingconfig', component: AdminFormManageEventComponent}
 ];
 
 @NgModule({

src/app/components/admin-form-create-event/admin-form-create-event.component.html

@@ -11,11 +11,8 @@
     <mat-step>
         <form [formGroup]="nameFormGroup">
             <ng-template matStepLabel>Event Name</ng-template>
-            Event Name:
             <mat-form-field>
-                <mat-label>
-                    <input matInput formControlName="eventName" required placeholder="Event Name...">
-                </mat-label>
+                    <input matInput formControlName="eventName" required placeholder="what's your event called?">
             </mat-form-field>
             <div>
             <button mat-raised-button matStepperNext color="primary">+ Event</button>
@@ -50,21 +47,32 @@
 
     <mat-step>
         <ng-template matStepLabel>Content</ng-template>
+
         <div style="border-style:solid">
             Add Content
             <input type="file">
             <button mat-raised-button color="secondary">Upload</button>
         </div>
-        <div class="drag-boundary" style="border-style:solid"  cdkDropList>
+        
+        <div cdkDropList style="border-style:solid" 
+        cdkDropListData=[images1] 
+        #LineUpList="cdkDropList" 
+        [cdkDropListConnectedTo]="GalleryList"
+        (cdkDropListDropped)="drop($event)">
             Event Line Up
-            <!-- <img *ngFor="let image of images" src={{image.src}} style="height:100px;" > -->
+            <img *ngFor="let image of images1" src={{image.src}} style="height:100px;" cdkDrag>
         </div>
-            <div>
+        
+        <div cdkDropList style="border-style:solid" 
+        cdkDropListData=[images2] 
+        #GalleryList="cdkDropList"
+        [cdkDropListConnectedTo]="LineUpList"
+        (cdkDropListDropped)="drop($event)">
             Gallery
             <!-- get images from database, display images here.
              -->
-            <img *ngFor="let image of images" src={{image.src}} style="height:100px;" cdkDrag cdkDragBoundary=".drag-boundary">
-            </div>
+            <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
+        </div>
 
 
     </mat-step>

src/app/components/admin-form-create-event/admin-form-create-event.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import { Router } from '@angular/router'
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-admin-form-create-event',
@@ -16,7 +17,15 @@ export class AdminFormCreateEventComponent implements OnInit {
   freqMin = 10;
   displayMax = 120;
   freqMax = 600;
-  images = [
+  images1 = [
+    { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+    },
+    {
+      src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
+    }
+  ]
+
+  images2 = [
     { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
     },
     {
@@ -34,7 +43,16 @@ export class AdminFormCreateEventComponent implements OnInit {
     })
   }
 
-  
+    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);
+    }
+  }
 
   createEvent(){