Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.
0:00/14:07
Drag and drop con transferencia entre columnas
Curso de Maquetación con Angular CDK y Tailwind CSS
Clase 13 / 24
Curso de Maquetación con Angular CDK y Tailwind CSS
Clase 13 / 24
Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.
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
)
}
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:
transferArrayItem, no me sirvio
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);
}
`
]
})
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
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]">
genial esa funcionalidad
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
No les paso que estaban moviendo las tareas y entre columnas se movia?
Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.
Martin Mendez
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
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
Hola, de acuerdo con una extensión que uso (Wappalyzer) está hecha en React y Next.js
Sergio Castillo
transferArrayItem, no me sirvio
Daniel Meza
pon acá el código de tu TS y tu html para poder apoyarte
Luis Angel
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
Sergio Floreano
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
MATEO FLOREZ ARROYO
debes importar algo no me funciona
David Fernando Rodriguez Delgado
genial esa funcionalidad
Jhon Pabon
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
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
realice la actualiacion de angular a la version latest junto con el cdk y ya me funciono correctamente
Luis Angel Castillo Vega
No les paso que estaban moviendo las tareas y entre columnas se movia?
MATEO FLOREZ ARROYO
Victor Alfredo Matzar Say
Probé tu código y todo me funcionó :), que es lo que no te esta funcionando ?
carlos andres Gudiño
excelente esta quedando full
Luis Angel Castillo Vega
EN mi caso no se organizan en su propia lista muevo la tablal de donde y se mueve la tabla de ToDo
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); } ` ] })
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]">
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 ); } } }