Cacher is the code snippet organizer for pro developers

<section>
  <section>
    <h4>List One</h4>
    <cdk-drop #listOne [connectedTo]="[listTwo]" 
              (dropped)="addToList($event)" 
              [data]="items2">
      <div *ngFor="let item of items2" cdkDrag>{{item}}
      </div>
    </cdk-drop>
  </section>

  <section>
    <h4>List Two</h4>
    <cdk-drop #listTwo [connectedTo]="[listOne]" 
              (dropped)="addToList($event)" 
              [data]="items3">
      <div *ngFor="let item of items3" cdkDrag>{{item}}</div>
    </cdk-drop>
  </section>

</section>

import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

export class AppComponent { 
  
  addToList(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
      );
    }
  }
  
}