Перетаскивание с помощью dinami c divs

Question

Здравствуйте! У меня проблема с кодом.

todo-list.component.html :
<div class="todos__block">
        
        
        <div class="todos" *ngFor="let element of statusList (PS. SEE Below)" >
            <h3 style="text-align: left; margin-left: 5px;">{{element.text}} :</h3>
            <cdk-virtual-scroll-viewport itemSize="100" class="todos__scroll__container">
                <div class="todos__item" *ngIf="filterStatusType(element.status).length > 0" >
                

                    <mat-card class="todos__item__body" *ngFor="let todo of filterStatusType(element.status)"  [ngStyle]="{'background-color': todo.status == 'in process' ? 'rgba(203, 19, 19, .6)' : (todo.status == 'during' ? 'rgba(255, 230, 51, .6)' : 'rgba(51, 255, 91, .6)')}" >
    
                        <div class="todos__item__content">
                            <span style="font-size: 18px; color: black; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" >[{{todo.priority}}] | {{todo.title}} </span>
                            <div class="todos__item__content__subtitle" *ngIf='todo.date && todo.date != "null" && todo.date != "1970-01-01"; else noDate'>
                                <mat-icon style="color: black; transform: scale(.85)">event</mat-icon>
                                <span style="font-size: 14px; color: black"> {{todo.date}} </span>
                            </div>
                        </div>
                        <div class="todos__item__actions" style="color: black;">
                            <mat-icon  *ngIf="todo.status == 'during'" (click)="todo_done(todo)" class="todos__item__actions__icon">check</mat-icon>
                            <mat-icon  (click)="openDialog(todo)" class="todos__item__actions__icon">
                                create
                            </mat-icon>
                            <mat-icon   (click)="deleteTodo(todo.id, todo.status)"
                                class="todos__item__actions__icon">
                                delete
                            </mat-icon>
                        </div>
    
                    </mat-card>
                </div>
            </cdk-virtual-scroll-viewport>
            
            
        </div>
        


        
        <br>
    </div>

todo-list.component.ts :
this.todos = [
      {
        'id': 1,
        'title': 'TestDuring',
        'description': 'Just a new task',
        'priority': '1',
        'status': 'during',
        'date': new Date('10.05.2020').toISOString().substr(0, 10)
      },
      {
        'id': 2,
        'title': 'TestDone',
        'description': 'Just a new task23',
        'priority': '3',
        'status': 'done',
        'date': new Date('4.21.2020').toISOString().substr(0, 10)
      },
      {
        'id': 3,
        'title': 'TestInProcess',
        'description': 'Just a new task3',
        'priority': '1',
        'status': 'in process',
        'date': new Date('8.05.2020').toISOString().substr(0, 10)
      },
      {
        'id': 4,
        'title': 'TestDuring1',
        'description': 'Just a new task3',
        'priority': '2',
        'status': 'during',
        'date': new Date('7.05.2020').toISOString().substr(0, 10)
      },
      {
        'id': 5,
        'title': 'TestDone1',
        'description': 'Just a new task3',
        'priority': '1',
        'status': 'done',
        'date': null
      },
      {
        'id': 6,
        'title': 'TestInProcess1',
        'description': 'Just a new task3',
        'priority': '2',
        'status': 'in process',
        'date': new Date('10.20.2020').toISOString().substr(0, 10)
      },
      {
        'id': 7,
        'title': 'TestDones',
        'description': 'Just a new task23',
        'priority': '2',
        'status': 'done',
        'date': new Date('4.19.2020').toISOString().substr(0, 10)
      },
    ]
...
this.statusList = [
      {
        'status': 'in process',
        'text': 'Do zrobienia'
      },
      {
        'status': 'during',
        'text': 'W toku'
      },
      {
        'status': 'done',
        'text': 'Zrobione'
      },
    ]
...
// Returns an filtered object with status "in process" then with status "during" and then "done"
filterStatusType(status){
    return this.todos.filter(value => value['status'] == status)
  }

Итак, как это работает? div с todos класса генерируется три раза с разным статусом (поскольку statusList имеет длину 3). В результате у меня есть 3 блока с классом = "todos" и с содержимым внутри этих блоков. Моя задача - сделать так, чтобы mat-card (внутри todos__item) могла перетаскивать из первого div (с todos класса) и опускать его во второй (с тем же классом) или в третий. Прошу прощения за мой плохой англи sh.