Contenido del curso
Drag and drop con transferencia entre columnas
Manuel Alvarez
Estudiante
Martin Mendez
Estudiante
Luis Gomero
Estudiante
Moisés Omar Martínez García
Estudiante
Sergio Castillo
Estudiante
Daniel Meza
Estudiante
Luis Angel
Estudiante
Brenda Sutara
Estudiante
Sergio Floreano
Estudiante
Ángel David Roque Ayala
Estudiante
MATEO FLOREZ ARROYO
Estudiante
David Fernando Rodriguez Delgado
Estudiante
Jhon Pabon
EstudianteJhon Pabon
EstudianteJhon Pabon
Estudiante
Luis Angel Castillo Vega
EstudianteMATEO FLOREZ ARROYO
Estudiante
Victor Alfredo Matzar Say
Estudiante
carlos andres Gudiño
EstudianteLuis Angel Castillo Vega
EstudianteNico 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:
Hola, de acuerdo con una extensión que uso (Wappalyzer) está hecha en React y Next.js
transferArrayItem, no me sirvio
pon acá el código de tu TS y tu html para poder apoyarte
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>
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]">
debes importar algo no me funciona
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
enviando desde la lista to do a doing o a done , en el evento drop esta condicional
event.previousContainer === event.container
esta retornando true
realice la actualiacion de angular a la version latest junto con el cdk y ya me funciono correctamente
No les paso que estaban moviendo las tareas y entre columnas se movia?
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 ); } } }
Probé tu código y todo me funcionó :), que es lo que no te esta funcionando ?
excelente esta quedando full
EN mi caso no se organizan en su propia lista muevo la tablal de donde y se mueve la tabla de ToDo
