Domina el Drag and Drop en Angular: Creando Interfaces Interactivas con Angular CDK

🚀 Introducción al Drag and Drop en Angular con CDK

El arrastrar y soltar (Drag and Drop, D&D) es una característica fundamental para construir interfaces de usuario interactivas y altamente usables. Permite a los usuarios reorganizar elementos, moverlos entre listas o activar acciones simplemente arrastrando un elemento con el ratón y soltándolo en una ubicación deseada.

Angular, a través de su Component Development Kit (CDK), proporciona un módulo de Drag and Drop potente y flexible que simplifica enormemente la implementación de esta funcionalidad. El CDK de Angular es una colección de herramientas y componentes que los desarrolladores pueden usar para construir sus propias bibliotecas de componentes o mejorar las aplicaciones existentes. En el caso de D&D, ofrece directivas declarativas que abstraen gran parte de la complejidad subyacente de la interacción.

Este tutorial te guiará a través de la implementación del Drag and Drop en tus aplicaciones Angular, desde la configuración básica hasta escenarios más avanzados como la reordenación de listas y la transferencia de elementos entre múltiples contenedores. ¡Prepárate para llevar la interactividad de tus apps Angular al siguiente nivel! ✨

¿Por qué usar Angular CDK para Drag and Drop?

Existen varias razones para elegir el Angular CDK para esta tarea:

• Integración nativa: Está diseñado para funcionar perfectamente con Angular, aprovechando su ciclo de vida y sistema de detección de cambios.
• Rendimiento: Está optimizado para un buen rendimiento, incluso con un gran número de elementos arrastrables.
• Accesibilidad: Incluye soporte integrado para accesibilidad, lo cual es crucial para aplicaciones modernas.
• Flexibilidad: Permite una personalización profunda del comportamiento y la apariencia del arrastre.
• Mantenimiento: Al ser parte del ecosistema de Angular, se beneficia del mantenimiento y las actualizaciones constantes del equipo de Angular.

🛠️ Configuración Inicial: Preparando tu Proyecto Angular

Antes de empezar a implementar la funcionalidad de Drag and Drop, necesitamos asegurarnos de que nuestro proyecto Angular esté correctamente configurado.

Paso 1: Crear un nuevo proyecto Angular (si aún no tienes uno)

Si ya tienes un proyecto existente, puedes saltarte este paso.

ng new angular-drag-drop-tutorial --standalone false
cd angular-drag-drop-tutorial

Usamos --standalone false para trabajar con módulos tradicionales en este tutorial, aunque el CDK funciona perfectamente con componentes standalone también.

Paso 2: Instalar Angular CDK

El módulo Drag and Drop es parte del paquete @angular/cdk. Lo instalaremos usando el comando ng add.

ng add @angular/cdk

Este comando instalará el paquete y realizará las configuraciones básicas necesarias.

Paso 3: Importar el DragDropModule

Para poder usar las directivas de Drag and Drop en tus componentes, necesitas importar el DragDropModule en el módulo donde vayas a utilizarlo. Si estás trabajando con un módulo principal (AppModule), lo harías así:

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop'; // Importa DragDropModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DragDropModule // Añádelo a los imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Si estás usando componentes standalone (autónomos), importarías el DragDropModule directamente en el componente donde lo vayas a usar:

// src/app/my-standalone.component.ts

import { Component } from '@angular/core';
import { DragDropModule } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-my-standalone',
  templateUrl: './my-standalone.component.html',
  styleUrls: ['./my-standalone.component.css'],
  standalone: true,
  imports: [DragDropModule]
})
export class MyStandaloneComponent { }

📦 Conceptos Básicos de Drag and Drop

El CDK de Drag and Drop se basa en dos directivas principales:

• cdkDrag: Hace que un elemento sea arrastrable.
• cdkDropList: Convierte un elemento en un contenedor donde se pueden soltar elementos arrastrables.

Veamos cómo usarlas.

Haciendo un Elemento Arrastrable (cdkDrag)

Para hacer cualquier elemento HTML arrastrable, simplemente aplica la directiva cdkDrag a él.

<!-- src/app/app.component.html -->

<div class="drag-box" cdkDrag>
  Arrastra esta caja
</div>

Y añade algunos estilos básicos en tu CSS para que sea visible:

/* src/app/app.component.css */

.drag-box {
  width: 150px;
  height: 150px;
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

Inicia tu aplicación con ng serve y verás una caja que puedes arrastrar libremente por la pantalla.

Creando un Contenedor de Soltado (cdkDropList)

Para que los elementos arrastrables puedan interactuar con otros contenedores, necesitamos definir zonas de 'soltado'. Esto se hace con la directiva cdkDropList.

<!-- src/app/app.component.html -->

<div class="drop-container" cdkDropList>
  Arrastra y suelta aquí
  <div class="drag-box" cdkDrag>
    Item 1
  </div>
  <div class="drag-box" cdkDrag>
    Item 2
  </div>
</div>

<style>
  .drop-container {
    width: 300px;
    height: 200px;
    border: 2px dashed #007bff;
    margin: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e6f7ff;
    border-radius: 8px;
  }
</style>

Con esto, los drag-box ahora son arrastrables. Sin embargo, no hay interacción de lista aún. Para habilitar la reordenación o la transferencia, necesitamos conectar las listas y manejar los eventos.

🔄 Reordenando Elementos dentro de una Lista (Sorting)

Una de las funcionalidades más comunes del Drag and Drop es la capacidad de reordenar elementos dentro de una misma lista. El Angular CDK simplifica esto enormemente con el evento cdkDropListDropped y la función moveItemInArray.

Ejemplo: Lista de Tareas Reordenable

Vamos a crear una lista de tareas simple que los usuarios puedan reordenar.

1. Componente HTML (app.component.html):

<h2>🚀 Mi Lista de Tareas Reordenable</h2>

<div
  cdkDropList
  class="task-list"
  (cdkDropListDropped)="dropTask($event)"
>
  <div class="task-item" *ngFor="let task of tasks" cdkDrag>
    {{ task }}
  </div>
</div>

Aquí, cdkDropList define el contenedor y cdkDrag hace que cada task-item sea arrastrable. El evento cdkDropListDropped se dispara cuando un elemento es soltado, y le pasamos el objeto del evento a nuestro método dropTask().

2. Componente TypeScript (app.component.ts):

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tasks = [
    'Comprar víveres',
    'Pagar facturas',
    'Hacer ejercicio',
    'Estudiar Angular CDK',
    'Llamar a Juan'
  ];

  dropTask(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.tasks, event.previousIndex, event.currentIndex);
  }
}

En el método dropTask, usamos la función auxiliar moveItemInArray del CDK. Esta función toma la matriz (this.tasks), el índice anterior del elemento arrastrado (event.previousIndex) y el nuevo índice donde se soltó (event.currentIndex), y reordena la matriz por ti. ¡Es así de sencillo!

3. Estilos (app.component.css):

.task-list {
  width: 300px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.task-item {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

.task-item:last-child {
  border-bottom: none;
}

/* Estilos cuando un elemento se arrastra */
.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.task-list.cdk-drop-list-dragging .task-item:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

El CDK añade automáticamente clases CSS a los elementos durante las operaciones de arrastre. Estas clases te permiten aplicar estilos visuales para mejorar la experiencia del usuario:

• .cdk-drag-preview: El elemento "fantasma" que sigue al cursor.
• .cdk-drag-placeholder: Un espacio vacío que se muestra en la posición donde se soltaría el elemento.
• .cdk-drag-animating: Se aplica a los elementos que se están animando de vuelta a su posición.
• .cdk-drop-list-dragging: Se aplica al contenedor de soltado cuando un elemento está siendo arrastrado sobre él.

// src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Importa aquí
// ... otros imports ...

@NgModule({
  // ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Añádelo aquí
    DragDropModule
  ],
  // ...
})
export class AppModule { }

↔️ Transferencia de Elementos entre Listas (Connecting Lists)

Además de reordenar elementos dentro de una misma lista, el CDK de Drag and Drop también permite transferir elementos entre diferentes listas. Esto es perfecto para implementar funcionalidades como tableros Kanban, cestas de compra o arrastrar elementos a una papelera.

Conectando Múltiples cdkDropList

Para permitir que los elementos se arrastren entre listas, necesitas 'conectar' los contenedores de cdkDropList utilizando la propiedad cdkDropListConnectedTo.

1. Componente HTML (app.component.html):

Crearemos dos listas: todo (tareas pendientes) y done (tareas completadas).

<div style="display: flex; justify-content: space-around; margin-top: 20px;">
  <div class="list-container">
    <h2>📝 Tareas Pendientes</h2>
    <div
      cdkDropList
      [cdkDropListData]="todo"
      class="task-list"
      cdkDropListConnectedTo="doneList"
      (cdkDropListDropped)="dropTransfer($event)"
      id="todoList"
    >
      <div class="task-item" *ngFor="let item of todo" cdkDrag>
        {{ item }}
      </div>
    </div>
  </div>

  <div class="list-container">
    <h2>✅ Tareas Completadas</h2>
    <div
      cdkDropList
      [cdkDropListData]="done"
      class="task-list"
      cdkDropListConnectedTo="todoList"
      (cdkDropListDropped)="dropTransfer($event)"
      id="doneList"
    >
      <div class="task-item" *ngFor="let item of done" cdkDrag>
        {{ item }}
      </div>
    </div>
  </div>
</div>

Aquí hay algunos puntos clave:

• Cada cdkDropList tiene un id único (todoList, doneList).
• cdkDropListConnectedTo se usa para especificar con qué otras listas puede interactuar este contenedor. Por ejemplo, todoList está conectado a doneList, y viceversa.
• [cdkDropListData] se utiliza para pasar los datos subyacentes a la directiva, lo cual es útil cuando se trabaja con la función transferArrayItem.
• Ambas listas comparten el mismo controlador de evento dropTransfer($event).

2. Componente TypeScript (app.component.ts):

Para manejar la transferencia entre listas, usaremos la función transferArrayItem del CDK.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todo = [
    'Preparar presentación',
    'Enviar email a cliente',
    'Revisar código PR',
    'Planificar sprint'
  ];

  done = [
    'Configurar entorno',
    'Diseñar base de datos'
  ];

  dropTransfer(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      // Si el elemento se arrastra dentro de la misma lista
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      // Si el elemento se arrastra a una lista diferente
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
}

La lógica en dropTransfer es crucial:

• Comprueba si event.previousContainer es igual a event.container. Si lo son, significa que el arrastre ocurrió dentro de la misma lista, y usamos moveItemInArray (como hicimos en la sección anterior).
• Si son diferentes, usamos transferArrayItem. Esta función se encarga de mover el elemento del array de origen al array de destino, en las posiciones correctas. Necesita el array de origen, el array de destino, el previousIndex y el currentIndex.

3. Estilos (app.component.css):

Asegúrate de que tus estilos sean consistentes y añade un poco de feedback visual para el arrastre entre listas.

/* ... estilos anteriores para .task-list y .task-item ... */

.list-container {
  width: 350px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Estilos para cuando un elemento está siendo arrastrado sobre un contenedor */
.cdk-drop-list-dragging .task-item:not(.cdk-drag-placeholder) {
  opacity: 0;
}

.cdk-drag-placeholder {
  background: #eee;
  border: dotted 2px #999;
  min-height: 50px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-receiving * {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Ahora, al ejecutar la aplicación, podrás arrastrar tareas entre las listas "Pendientes" y "Completadas".

🎨 Personalización Visual y Feedback del Usuario

Una buena experiencia de Drag and Drop no solo se trata de la funcionalidad, sino también del feedback visual que se le da al usuario. El Angular CDK proporciona herramientas para personalizar este aspecto.

Clases CSS para Estados de Arrastre

Ya vimos algunas clases importantes que el CDK añade automáticamente:

• .cdk-drag-preview: Para el elemento flotante que sigue al cursor.
• .cdk-drag-placeholder: Para el espacio vacío que ocupa el elemento arrastrado en su posición original o en la nueva posición de soltado.
• .cdk-drag-animating: Durante las animaciones de retorno del elemento.
• .cdk-drop-list-dragging: En el contenedor cuando un elemento es arrastrado sobre él.

Puedes utilizar estas clases para aplicar estilos que mejoren la experiencia. Por ejemplo:

.cdk-drag-preview {
  background: #007bff;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
  transform: rotate(5deg); /* Un poco de rotación para un efecto divertido */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.cdk-drag-placeholder {
  background: #e0f7fa; /* Un color suave para el placeholder */
  border: 2px dashed #00bcd4;
  opacity: 0.7;
  border-radius: 4px;
}

.task-list.cdk-drop-list-dragging {
  border-color: #007bff; /* Resaltar el borde del contenedor cuando se arrastra sobre él */
  background-color: #f0f8ff;
}

Modificando el Preview (cdkDragPreview)

A veces, el elemento arrastrado por defecto no es lo que quieres mostrar. Puedes proporcionar una plantilla personalizada para el preview utilizando cdkDragPreview.

<div class="task-item" *ngFor="let task of tasks" cdkDrag>
  {{ task }}
  <ng-template cdkDragPreview>
    <div class="custom-preview">
      Arrastrando: **{{ task }}**
    </div>
  </ng-template>
</div>

<style>
  .custom-preview {
    background-color: #ffeb3b; /* Amarillo vibrante */
    padding: 8px 15px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    color: #333;
  }
</style>

Con esto, cuando arrastres un task-item, verás un preview amarillo personalizado en lugar del elemento original.

Modificando el Placeholder (cdkDragPlaceholder)

De manera similar, puedes personalizar el placeholder que se muestra en la posición original del elemento arrastrado o en la nueva posición de soltado.

<div class="task-item" *ngFor="let task of tasks" cdkDrag>
  {{ task }}
  <ng-template cdkDragPlaceholder>
    <div class="custom-placeholder">Soltar aquí...</div>
  </ng-template>
</div>

<style>
  .custom-placeholder {
    background-color: #cfd8dc; /* Gris suave */
    border: 2px dashed #607d8b;
    padding: 15px;
    text-align: center;
    color: #455a64;
    font-style: italic;
  }
</style>

Esto te da un control total sobre cómo se ve tu Drag and Drop.

Consejo Pro: Utiliza el poder de cdkDropListGroup para agrupar contenedores y cdkDragBoundary para restringir el movimiento de elementos arrastrables a un área específica. Estas son opciones avanzadas para escenarios más complejos.

🧠 Consideraciones Avanzadas y Mejores Prácticas

Deshabilitar Drag and Drop

Puedes deshabilitar el arrastre de elementos o la capacidad de soltar en un contenedor condicionalmente utilizando las propiedades cdkDragDisabled y cdkDropListDisabled.

<div class="task-item" cdkDrag [cdkDragDisabled]="task.completed">
  {{ task.name }}
</div>

<div cdkDropList [cdkDropListDisabled]="!user.isAdmin">
  <!-- ... -->
</div>

Eventos de Drag and Drop

El CDK proporciona una serie de eventos que puedes escuchar para implementar lógicas más complejas:

• (cdkDragStarted): Cuando el arrastre comienza.
• (cdkDragMoved): Cuando el elemento arrastrado se mueve.
• (cdkDragReleased): Cuando el elemento arrastrado se suelta (antes de que se actualice el DOM).
• (cdkDragEnded): Cuando la operación de arrastre termina (después de que se actualice el DOM).
• (cdkDropListEntered): Cuando un elemento entra en un contenedor de soltado.
• (cdkDropListExited): Cuando un elemento sale de un contenedor de soltado.
• (cdkDropListDropped): Cuando un elemento es soltado en un contenedor (el evento principal que hemos estado usando).

Puedes usarlos para implementar feedback visual adicional (por ejemplo, cambiar el estilo del cursor o del contenedor), realizar validaciones o disparar otras acciones.

<div
  class="task-item"
  cdkDrag
  (cdkDragStarted)="onDragStarted(task)"
  (cdkDragEnded)="onDragEnded(task)"
>
  {{ task.name }}
</div>

// app.component.ts

// ...
export class AppComponent {
  // ...
  draggingTask: string | null = null;

  onDragStarted(task: string) {
    this.draggingTask = task;
    console.log(`Arrastrando: ${task}`);
    // Aquí podrías, por ejemplo, cambiar una variable para mostrar una overlay.
  }

  onDragEnded(task: string) {
    this.draggingTask = null;
    console.log(`Terminó el arrastre de: ${task}`);
    // Aquí podrías restablecer estilos o variables de estado.
  }
}

Integración con Backends

Cuando reordenas o transfieres elementos, normalmente querrás persistir estos cambios en un backend. Después de que moveItemInArray o transferArrayItem actualicen el estado local de tu aplicación, deberías enviar una solicitud a tu API para actualizar la base de datos.

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http'; // Asegúrate de importar HttpClientModule en AppModule
import { Component } from '@angular/core';

interface Task { id: number; name: string; status: 'todo' | 'done'; order: number; }

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todo: Task[] = [
    { id: 1, name: 'Preparar presentación', status: 'todo', order: 0 },
    { id: 2, name: 'Enviar email a cliente', status: 'todo', order: 1 }
  ];

  done: Task[] = [
    { id: 3, name: 'Configurar entorno', status: 'done', order: 0 }
  ];

  constructor(private http: HttpClient) { }

  dropTransfer(event: CdkDragDrop<Task[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      this.updateBackendOrder(event.container.data);
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
      // Actualiza el estado del elemento transferido
      const movedItem = event.container.data[event.currentIndex];
      movedItem.status = event.container.id === 'todoList' ? 'todo' : 'done';

      this.updateBackendStatusAndOrder(event.previousContainer.data, event.container.data, movedItem);
    }
  }

  private updateBackendOrder(list: Task[]) {
    // Lógica para actualizar el orden en el backend
    const updatedTasks = list.map((task, index) => ({ ...task, order: index }));
    this.http.post('/api/tasks/reorder', updatedTasks).subscribe(
      response => console.log('Orden actualizado en backend', response),
      error => console.error('Error actualizando orden', error)
    );
  }

  private updateBackendStatusAndOrder(
    previousList: Task[],
    currentList: Task[],
    movedItem: Task
  ) {
    // Lógica para actualizar estado y orden en el backend
    const updatedPreviousList = previousList.map((task, index) => ({ ...task, order: index }));
    const updatedCurrentList = currentList.map((task, index) => ({ ...task, order: index }));

    this.http.post('/api/tasks/transfer', {
      movedItem: movedItem,
      previousList: updatedPreviousList,
      currentList: updatedCurrentList
    }).subscribe(
      response => console.log('Transferencia y orden actualizados en backend', response),
      error => console.error('Error en transferencia', error)
    );
  }
}

Conclusion: Interfaces Interactivas al Alcance de tu Mano

¡Felicidades! 🎉 Has llegado al final de este tutorial y ahora tienes un conocimiento sólido sobre cómo implementar funcionalidades de arrastrar y soltar en tus aplicaciones Angular utilizando el Angular CDK. Hemos cubierto desde la configuración básica hasta la reordenación de elementos dentro de una lista, la transferencia entre múltiples contenedores y la personalización visual.

El Drag and Drop es una característica poderosa que mejora drásticamente la experiencia del usuario, permitiendo interacciones más intuitivas y eficientes. El Angular CDK te proporciona las herramientas para construir estas funcionalidades con un mínimo esfuerzo y una gran flexibilidad.

Recuerda experimentar con las diferentes propiedades y eventos que ofrece el DragDropModule para adaptar el comportamiento a las necesidades específicas de tu aplicación. ¡Ahora tienes el poder de crear interfaces de usuario mucho más dinámicas e interactivas!

¡Sigue construyendo y explorando el vasto mundo de Angular! 🚀