No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Drag and drop con transferencia entre columnas

13/24
Recursos

Aportes 8

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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 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
    )
  }
 

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

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