NAS*-103949 Drag and drop working, needs refinement

src/app/components/common/dual-list/dual-list.component.html

 <div class="container-dualListBox">
-  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight">
+  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
+    cdkDropList
+    #userList="cdkDropList"
+    [cdkDropListData]="availableItems.totalItems"
+    [cdkDropListConnectedTo]="[memberList]"
+    (cdkDropListDropped)="drop($event)">
    <div class="list-title" *ngIf="title1">{{title1}}</div>
-   <div *ngFor="let item of availableItems.totalItems" [ngClass]="{ choosed: availableItems.isSelected(item,1) }" (click)="availableItems.select(item)">
-      <mat-list *ngIf="templateItem;else noTemplateItem">
+   <div *ngFor="let item of availableItems.totalItems" cdkDrag [ngClass]="{ choosed: availableItems.isSelected(item,1) }" (click)="availableItems.select(item)">
+      <mat-list *ngIf="templateItem;else noTemplateItem" >
         <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item }"> </ng-container>
       </mat-list>
       <ng-template #noTemplateItem>
@@ -30,9 +35,14 @@
       </ng-template>
     </div>
   </div>
-  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight">
+  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
+    cdkDropList
+    #memberList="cdkDropList"
+    [cdkDropListData]="selectedItems.totalItems"
+    [cdkDropListConnectedTo]="[userList]"
+    (cdkDropListDropped)="drop($event)">
     <div class="list-title" *ngIf="title2">{{title2}}</div>
-    <div *ngFor="let item of selectedItems.totalItems" [ngClass]="{ choosed: selectedItems.isSelected(item,2) }"  (click)="selectedItems.select(item)">
+    <div *ngFor="let item of selectedItems.totalItems" cdkDrag [ngClass]="{ choosed: selectedItems.isSelected(item,2) }"  (click)="selectedItems.select(item)">
       <mat-list *ngIf="templateItem;else noTemplateItem">
         <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item }"> </ng-container>
       </mat-list>

src/app/components/common/dual-list/dual-list.component.ts

 import {Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
 import {difference, ListSelection, ListSelectionImpl} from './models';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-dual-listbox',
@@ -38,6 +39,7 @@ export class DualListboxComponent implements OnInit {
     this.availableItems = from;
     this.selectedItems = to;
     this.selectedItemsChange.emit(this.selectedItems.totalItems);
+    console.log(this.availableItems.totalItems, this.selectedItems.totalItems)
   }
 
   return() {
@@ -46,6 +48,17 @@ export class DualListboxComponent implements OnInit {
     this.availableItems = to;
     this.selectedItemsChange.emit(this.selectedItems.totalItems);
   }
+  
+  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);
+    }
+  }
 }
 
 

src/app/components/common/dual-list/dual-list.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DualListboxComponent } from './dual-list.component';
 import { MatButtonModule, MatListModule, MatIconModule } from '@angular/material';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+
 
 @NgModule({
   declarations: [DualListboxComponent],
-  imports: [CommonModule, MatButtonModule, MatListModule, MatIconModule],
+  imports: [CommonModule, MatButtonModule, MatListModule, MatIconModule, DragDropModule],
   exports: [DualListboxComponent]
 })
 export class NgxDualListboxModule {}