¿Cómo crear una lista de tareas pendientes usando arrastrar y soltar en Angular 7?

Podemos crear fácilmente una lista de tareas pendientes mediante el módulo Arrastrar y Soltar proporcionado por el kit de desarrollo de componentes angulares (CDK).

En primer lugar, cree un componente angular utilizando el siguiente comando:

 ng g c To-Do 

Ahora importa CdkDragDrop, moveItemInArray, transferArrayItem desde @angular/cdk/drag-drop a nuestro componente de tareas pendientes,

Escribiendo el código para la vista de componentes:
Cree dos divisiones, una para los elementos que están POR HACER y otra para los elementos que están COMPLETADOS.
Estos son algunos de los parámetros:

1. cdkDropList: permite que la división sepa que es un contenedor de entrega
2. cdkDropListData: vincula los datos a la vista
3. cdkDropListConnectedTo: obtiene la identificación de otro contenedor de entrega al que está conectada la división actual
4. cdkDropListDropped: después de arrastrar los elementos, el modelo de datos debe actualizarse. Para eso, podemos escuchar este evento.
5. cdkDrag: especifica que el elemento se puede arrastrar

Ejemplo:

<div>
<!-- container for both list  -->
  <h1>To do</h1>
  
<!-- To-Do list  -->
  
  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListConnectedTo]="[doneList]"
    [cdkDropListData]="todo"
    (cdkDropListDropped)="drag($event)">
    <div *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>
  
<div>
  
  <h1>Done</h1>
  
<!-- Done list  -->
  
  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListConnectedTo]="[todoList]"
    [cdkDropListData]="done"
    class="example-list"
    (cdkDropListDropped)="drag($event)">
    <div *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

Ahora escriba el código para escuchar el evento y agregar los datos.
Aquí usamos una lista codificada, pero siempre puede recibir información usando la directiva ngmodel. Hay
dos posibilidades:

1. El elemento se arrastra al mismo contenedor: use moveItemInArray para moverlo en el mismo contenedor
2. El elemento se arrastra a otro contenedor: use transferArrayItem para mover a otro contenedor

export class To-Do {
  
// hardcoded lists
  
  todo = [
    'Go to gym',
    'Eat lunch',
    'Take a nap',
    'Physics syllabus'
  ];
  
  done = [
    'Assignment',
    'Coding practice',
    'Maths syllabus',
    'English syllabus'
  ];
  
//function for listening to the event
  
  drag(event: CdkDragDrop<string[]>) {
  
//if movement if within the same container
  
    if (event.previousContainer === event.container) {
      moveItemInArray(
event.container.data, event.previousIndex, event.currentIndex);
    } 
  
//if movement if to other containers
  
    else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}

Salida: arrastre exitoso de ‘Comer el almuerzo’ de la lista de tareas pendientes a la lista de tareas realizadas.