Drag and drop con transferencia entre columnas
Contenido del curso
Manuel Alvarez
Martin Mendez
Luis Gomero
Moisés Omar Martínez García
Sergio Castillo
Daniel Meza
Luis Angel
Brenda Sutara
Sergio Floreano
Ángel David Roque Ayala
MATEO FLOREZ ARROYO
David Fernando Rodriguez Delgado
Jhon Pabon
Jhon Pabon
Jhon Pabon
Luis Angel Castillo Vega
MATEO FLOREZ ARROYO
Victor Alfredo Matzar Say
carlos andres Gudiño
Luis Angel Castillo Vega
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:
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
