Drag and drop en Angular

Hola a todos, hoy os voy a explicar como funciona virtual scrolling en Angular.

Drag and drop es una funcionalidad que salió en Angular 7 que nos permite mover elementos de una zona a otra «arrastrando» y «soltando», es muy visual a nivel de usuario.

Creamos nuestro proyecto:

Crear y ejecutar un proyecto angular

Para ello, necesitamos instalar la dependencia @angular/cdk

Una vez instalado, en app.module, importamos el módulo ScrollingModule que viene de @angular/cdk/scrolling

Creamos un nuevo componente:

También instalaré bootstrap para hacer columnas mas sencillo:

Instalar Bootstrap 4 en nuestra aplicación angular

Vamos a crear dos arrays de numeros, pueden ser del tipo que quieras. También vamos a rellenarlo.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent implements OnInit {

  public listNumbers1: number[];
  public listNumbers2: number[];

  constructor() { }

  ngOnInit() {
    this.listNumbers1 = [];
    this.listNumbers2 = [];

    for (let i = 0; i < 10; i++) {
      this.listNumbers1.push(i);
    }
    
    for (let i = 10; i < 20; i++) {
      this.listNumbers2.push(i);
    }
  }

}

En el HTML, tendremos lo siguiente:

<div class="row">
  
<div cdkDropList class="col-6" #ln1="cdkDropList" [cdkDropListData]="listNumbers1" [cdkDropListConnectedTo]="[ln2]" (cdkDropListDropped)="drop($event)">
    
<div cdkDrag class="block block-1" *ngFor="let n of listNumbers1">
      <span>{{n}}</span>
    </div>

  </div>

      
  
<div cdkDropList class="col-6" #ln2="cdkDropList" (cdkDropListDropped)="drop($event)" [cdkDropListData]="listNumbers2" [cdkDropListConnectedTo]="[ln1]">
    
<div cdkDrag class="block block-2" *ngFor="let n of listNumbers2">
      <span>{{n}}</span>
    </div>

  </div>


</div>

Expliquemos que es cada cosa, porque hay varias partes importantes.

En cada bloque que queramos usar el drag and drop, tenemos que poner la directiva cdkDropList, además del id con cdkDropList de nuevo.

Después, tenemos un Input llamado cdkDropListData donde le indicamos que datos vamos a coger, en nuestro, el primer array. Otro Input es cdkDropListConnectedTo donde por medio de corchetes, le indicamos con que otro bloque esta relacionado, es decir, indicando si id. En el otro bloque será al revés.

También, indicaremos el evento que se realizará al soltar el elemento. Después, realizaremos el método drop en el ts.

Por ultimo, debemos usar la directiva cdkDrag en el elemento que vamos a arrastrar como tal.

En el ts, vamos a realizar el método drop.

/**
 * Evento cuando hacemos el drag anddrop
 * @param event Elemento movido
 */
  drop(event: CdkDragDrop<number[]>) {
  // Si se mueve dentro de la misma bloque, lo muevo dentro del contenedor
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // Sino lo paso al otro contenedor
    transferArrayItem(event.previousContainer.data,
                      event.container.data,
                      event.previousIndex,
                      event.currentIndex);
  }
}

En el primer if, si es el mismo contenedor, lo mueve entre si, sino se pasa de un contenedor a otro.

moveItemInArray y transferArrayItem son funciones de cdk drag-drop de Angular, donde le indicamos los datos del contenedor origen y destino y su anterior y nuevo índice en la lista.

También vamos a añadir algo de estilos:

.block{
    height: 50px;
    font-size: 24px;
    padding: 10px;
    border: 1px solid #000;
}

.block-1{
    background: green;
}

.block-2{
    background: yellow;    
}

En app.component.html, quitamos todo y ponemos:

<app-drag-drop></app-drag-drop>

Arrancamos con npm start y esto es lo que veremos:

Ahora podemos mover elementos de un bloque a otro:

Aquí te dejo el ejemplo para que lo descargues.

Aquí os dejo un video explicado paso a paso:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.