Drag and drop con transferencia entre columnas

Clase 13 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Clase anteriorSiguiente clase

Manuel Alvarez

student•

Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.

Martin Mendez

student•

Hola Me parece que no habría neecidad del if 'n el drop()

Si quieren prueben esto y también funciona.


drop(event: CdkDragDrop<Todo[]>) {
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    )
  }

Luis Gomero

student•

Genial! Si la pagina web de Platzi https://platzi.com/home esta usando Angular, seria bueno que le apliquen este CDK para reordenar las rutas segun nuestra prioridad. En en App movil se puede pero en web no D:

Moisés Omar Martínez García

student•

Hola, de acuerdo con una extensión que uso (Wappalyzer) está hecha en React y Next.js

Sergio Castillo

student•

transferArrayItem, no me sirvio

Daniel Meza

student•

pon acá el código de tu TS y tu html para poder apoyarte

Luis Angel

student•

A mi tampoco me funcionaba y lo que hice fue agregar un id a cada elemento y en cada elemento colocar cdkDropListConnectedTo y le pasas un array de string con los nombres de los otros elementos con los que se conectará, muestro el código de uno como referencia

<div id="todoList" class="text-sm mt-2 min-h-[2.5rem]" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="todos" [cdkDropListConnectedTo]="['doingList', 'doneList']"> <div *ngFor="let todo of todos" cdkDrag class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400" > {{ todo.title }} </div> </div>

Brenda Sutara

student•

Para los que no podían transferir tareas como a mi, posible solución que me ayudó. Me habia olvidado de transferir el CdkDropListGroup les dejo mi código (me sirvió mucho ver la documentación tambien original) Estoy utilizando angular 17

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
  CdkDropListGroup,
} from '@angular/cdk/drag-drop';
import { ToDo } from '../../models/todo.model';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
  faBox,
  faWaveSquare,
} from '@fortawesome/free-solid-svg-icons';
import { faTrello } from '@fortawesome/free-brands-svg-icons';


@Component({
  selector: 'app-board',
  standalone: true,
  imports: [
    CommonModule,
    NavbarComponent,
    CdkDrag,
    CdkDropList,
    CdkDropListGroup, //esto es lo que me faltaba importar
    FontAwesomeModule],
  templateUrl: './board.component.html',
  styles: [
    `
    .cdk-drag-animating {
      transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
    }

    .cdk-drop-list-dragging .cdk-drag {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    `
  ]
})

Sergio Floreano

student•

A los que talvez no les funcione deben usar la directiva cdkDropListConnectedTo y darle una referencia a las columnas para que se realice la transferencia, lo pueden consultar en la documentación oficial

Ángel David Roque Ayala

student•

Tenia problemas para poder realizar la transferencia entre columnas, lo resolvi agregando referencias al dom y agregando la directiva cdkDropListConnectedTo

<div class="text-sm mt-2 min-h-[2.5rem]" #todosList="cdkDropList" cdkDropList
          (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="todos"
          [cdkDropListConnectedTo]="[doingList, doneList]">

 <div class="text-sm mt-2 min-h-[2.5rem]" #doingList="cdkDropList" cdkDropList (cdkDropListDropped)="drop($event)"
          [cdkDropListData]="doing" [cdkDropListConnectedTo]="[todosList, doneList]">

<div class="text-sm mt-2 min-h-[2.5rem]" #doneList="cdkDropList" cdkDropList
          (cdkDropListDropped)="drop($event)" [cdkDropListData]="done"
          [cdkDropListConnectedTo]="[todosList, doingList]">

MATEO FLOREZ ARROYO

student•

debes importar algo no me funciona

David Fernando Rodriguez Delgado

student•

genial esa funcionalidad

Jhon Pabon

student•

Me Funciono normalmente moviendo el item dentro del array pero al realizar la transferencia a otro array no me funciona ,copie el codigo tal cual esta en el recurso lo copie y pegue y sigue sin funcionar , no se que diferencia haya con el angular en el que trabaja el profe y los demas estudiantes ,algunos estudiantes tampoco les funciona pero no dan mucha informacion con respecto a eso

Jhon Pabon

student•

enviando desde la lista to do a doing o a done , en el evento drop esta condicional

event.previousContainer === event.container

esta retornando true

Jhon Pabon

student•

realice la actualiacion de angular a la version latest junto con el cdk y ya me funciono correctamente

Luis Angel Castillo Vega

student•

No les paso que estaban moviendo las tareas y entre columnas se movia?

MATEO FLOREZ ARROYO

student•

No me esta funcionando aqui mi codigo:

<div class="flex flex-col h-screen">
  <app-navbar></app-navbar>
  <div class="w-full grow bg-sky-600 px-4 pb-4" cdkDropListGroup >
    <div>
      <h2 class="text-xl font-bold text-white my-4">Demo Board</h3>
    </div>
    <div class="flex items-start w-full h-full" >
      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">To Do</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList
         (cdkDropListDropped)="drop($event)" [cdkDropListData]="todos">
          <div *ngFor="let todo of todos"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>

      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">Doing</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="doing">
          <div *ngFor="let todo of doing"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>

      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">Done</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" id="done" cdkDropList (cdkDropListDropped)="drop($event)"
          [cdkDropListData]="done">
          <div *ngFor="let todo of done"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ts:

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

import { ToDo } from 'src/app/models/todo.models';
@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styles: [
    `
      /* Animate items as they're being sorted. */
      .cdk-drop-list-dragging .cdk-drag {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      }

      /* Animate an item that has been dropped. */
      .cdk-drag-animating {
        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
      }
    `
  ]
})
export class BoardComponent implements OnInit {


  todos: ToDo[] = [
    {
      id: '1',
      title: 'Task 1'
    },
    {
      id: '2',
      title: 'Task 2'
    },
    {
      id: '3',
      title: 'Task 3'
    }
  ];

  doing: ToDo[] = [
    {
      id: '3',
      title: 'Task 4'
    }
  ];

  done: ToDo[] = [
    {
      id: '3',
      title: 'Task 5'
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }


  drop(event: CdkDragDrop<ToDo[]>) {
    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
      );
    }

  }

}

Victor Alfredo Matzar Say

student•

Probé tu código y todo me funcionó :), que es lo que no te esta funcionando ?

carlos andres Gudiño

student•

excelente esta quedando full

Luis Angel Castillo Vega

student•

EN mi caso no se organizan en su propia lista muevo la tablal de donde y se mueve la tabla de ToDo

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
  CdkDropListGroup,
} from '@angular/cdk/drag-drop';
import { ToDo } from '../../models/todo.model';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
  faBox,
  faWaveSquare,
} from '@fortawesome/free-solid-svg-icons';
import { faTrello } from '@fortawesome/free-brands-svg-icons';


@Component({
  selector: 'app-board',
  standalone: true,
  imports: [
    CommonModule,
    NavbarComponent,
    CdkDrag,
    CdkDropList,
    CdkDropListGroup, //esto es lo que me faltaba importar
    FontAwesomeModule],
  templateUrl: './board.component.html',
  styles: [
    `
    .cdk-drag-animating {
      transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
    }

    .cdk-drop-list-dragging .cdk-drag {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    `
  ]
})

<div class="text-sm mt-2 min-h-[2.5rem]" #todosList="cdkDropList" cdkDropList
          (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="todos"
          [cdkDropListConnectedTo]="[doingList, doneList]">

 <div class="text-sm mt-2 min-h-[2.5rem]" #doingList="cdkDropList" cdkDropList (cdkDropListDropped)="drop($event)"
          [cdkDropListData]="doing" [cdkDropListConnectedTo]="[todosList, doneList]">

<div class="text-sm mt-2 min-h-[2.5rem]" #doneList="cdkDropList" cdkDropList
          (cdkDropListDropped)="drop($event)" [cdkDropListData]="done"
          [cdkDropListConnectedTo]="[todosList, doingList]">

<div class="flex flex-col h-screen">
  <app-navbar></app-navbar>
  <div class="w-full grow bg-sky-600 px-4 pb-4" cdkDropListGroup >
    <div>
      <h2 class="text-xl font-bold text-white my-4">Demo Board</h3>
    </div>
    <div class="flex items-start w-full h-full" >
      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">To Do</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList
         (cdkDropListDropped)="drop($event)" [cdkDropListData]="todos">
          <div *ngFor="let todo of todos"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>

      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">Doing</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="doing">
          <div *ngFor="let todo of doing"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>

      <div class="rounded bg-gray-200 w-72 p-2 mr-3">
        <div class="flex justify-between py-1">
          <h3 class="text-sm font-bold ml-2">Done</h4>
        </div>

        <div class="text-sm mt-2 min-h-[2.5rem]" id="done" cdkDropList (cdkDropListDropped)="drop($event)"
          [cdkDropListData]="done">
          <div *ngFor="let todo of done"
            cdkDrag
            class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400"
          >
            {{ todo.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

import { ToDo } from 'src/app/models/todo.models';
@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styles: [
    `
      /* Animate items as they're being sorted. */
      .cdk-drop-list-dragging .cdk-drag {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      }

      /* Animate an item that has been dropped. */
      .cdk-drag-animating {
        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
      }
    `
  ]
})
export class BoardComponent implements OnInit {


  todos: ToDo[] = [
    {
      id: '1',
      title: 'Task 1'
    },
    {
      id: '2',
      title: 'Task 2'
    },
    {
      id: '3',
      title: 'Task 3'
    }
  ];

  doing: ToDo[] = [
    {
      id: '3',
      title: 'Task 4'
    }
  ];

  done: ToDo[] = [
    {
      id: '3',
      title: 'Task 5'
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }


  drop(event: CdkDragDrop<ToDo[]>) {
    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
      );
    }

  }

}

Drag and drop con transferencia entre columnas

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular