No tienes acceso a esta clase

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

Drag and drop con columnas dinámicas

14/24
Recursos

Aportes 16

Preguntas 0

Ordenar por:

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

¿no se le puede dar like a un video?

¡ este curso está genial !

Customizar el scroll bar

En el archivo styles.scss

/* Agrega estilos personalizados para la barra de desplazamiento */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
    border-radius: 4px;
  }
  
  /* Agrega un efecto hover a la barra de desplazamiento */
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

si quieren mover las listas pueden utilizar cdkDropListOrientation https://material.angular.io/cdk/drag-drop/overview#list-orientation.

Les comparto como va mi solución del reto hasta el momento.


Acepto retroalimentación
https://imgur.com/gallery/u520LTl

Así vamos … excelente curso.

Si están usando la sintaxis de angular 17: ```html
<app-nav-bar></app-nav-bar>

Demo Board

@for (column of columns; track column) {

{{column.title}}

@for (task of column.tasks; track task.id) {
{{ task.title }}
}
} <button (click)="addColumn()">Add Column</button>
```

Me está gustando mucho el curso

Para conectar Overlays a elementos dinámicos pueden hacer lo siguiente:
Declarar el trigger en .TS:

triggerOrigin: any;

Ese será la entrada de la propiedad ‘cdkConnectedOverlayOrigin’

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="triggerOrigin" 

Luego crean un método Toggle:

toggle(trigger: any) {
  this.triggerOrigin = trigger;
  this.isOpen = !this.isOpen
}

Luego tomamos el Toggle como parámetro pasándolo al template:

<button class="btn btn-primary" cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="toggle(trigger)">Open overlay</button>
...
<div style="margin-top:100px">
  <button *ngFor="let btn of btns" cdkOverlayOrigin #trigger="cdkOverlayOrigin"
   (click)="toggle(trigger)">{{btn}}</button>
</div>

Y listo, ya tendrían su Overlay en elementos dinámicos.

Tenia problemas para agregar la directiva [cdkDropListConnectedTo] de forma dinamica, asi que lo solucione de la siguiente forma:

Ts:

Agregue una nueva propiedad a la interfaz

export interface Column {
    id: string;	
    title: string;
    todos: ToDo[];
}

y una vez agregado un id a cada columna agrege un getter para obtener la lista de los ids:

get columnsIds() {
    return this.columns.map(column => column.id);
  }

Y finalmente agregue cada id a cada elemento del dom y la directiva cdkDropListConnectedTo:

<div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList
          (cdkDropListDropped)="drop($event)" [cdkDropListData]="column.todos" [id]="column.id"
          [cdkDropListConnectedTo]="columnsIds"
          >
Nicobytes, es uno de los mejores profesores en esta plataforma.
Para los que esten usando Angular 17 con signals, asi fue como logre arrastrar las columnas entre si: En el HTML coloqué los siguientes atributos: * *cdkDropList* * *cdkDropListOrientation* * *cdkDropListDropped* * *cdkDropListData* No hay que olvidarnos que como nuestro "columns" es un signal, tenemos que subscribirnos a el "*\[cdkDropListData]*="columns()"" Y en el div de cada columna es decir la que tiene la clase "rounded" coloqué el "*cdkDrag*" ```js
@for (column of columns(); track column) {

{{ column.title }}

```Por ultimo en el TypeScript simplemente cree la función dropColumns que mueve los arrays dentro de las columnas: ```js dropColumns(event: CdkDragDrop<Column[]>) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } ```Recuerda que"columns" debe de ser un signal: ```ts columns = signal<Column[]>([]); addColumn() { this.columns.update((columns) => [...columns, {title: 'New Column', todos: []}]) } ```Gracias :)

Para resolver el reto de Drag&Drop horizontal, se pueden apoyar de la siguiente documentación, realmente no es muy complicado. Saludos 😉

https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-horizontal-sorting

comparto un poco de mi avance 😃

Va quedando bien, lo que sigue es hacer las funcionalidades de Add card, rename list, delete list

Mi solución a los retos:
Para el scroll cree un component.scss:

/* Estilos para navegadores webkit */
/* Cambiar el color del pulgar y de la pista del scroll */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.11);
  border-radius: 10px;
}
::-webkit-scrollbar {
  width: 8px;
  background-color: gray;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.432);
  border-radius: 10px;
}

Para el input:
En component.ts:

newTitle = new FormControl('');
  isAddingCol = false;

 addColumn(){
    if (this.isAddingCol === false){
      this.isAddingCol = true;
      // para el focus del input, se le asigna una vez ya este en pantalla
      setTimeout(() => {
        document.getElementById('newTitle')?.focus();
      }, 10);
    }else{
       this.columns.push({
      title: this.newTitle.value!,
      todos: [],
      })
    this.isAddingCol = false;
    this.newTitle.setValue("");
    }

  }

Reto Cumplido!

En las respuestas les pasare el código …, si pueden mejorar algo, me gustaría que lo comentaran