Cómo construir una cuadrícula de arrastrar y soltar en Angular Material en lugar de simplemente ordenar una lista.
Según la documentación de Angular Material, no hay una forma pura de crear un grid de arrastrar y soltar. Por lo tanto, una solución que estoy considerando es un poco complicada, pero es suficiente para mi caso. Se trata de tener múltiples listas horizontales (donde puedo arrastrar solo en su propia fila). Al final, parece un grid común. Tengo la posición de fila y columna de cada elemento del grid, lo que significa que divido en tantas filas como tengo. Digamos que hay 4 elementos:
Así que tendré 1 Array para cada fila, después recorrerá en la plantilla según el siguiente código:
<div *ngfor="let row of Grid; let i = index" cdkdroplistorientation="horizontal" cdkdroplist="" class="flex list-section" (cdkdroplistdropped)="drop($event, i)">
<app-fields class="list-box" cdkdrag="" *ngfor="let groupData of row" [groupdata]="groupData">
</app-fields>
</div>
drop(event: CdkDragDrop<string[]>, idx?: number) {
moveItemInArray(this.rows[idx], event.previousIndex, event.currentIndex);
}
Mi pregunta es. ¿Hay una forma más limpia de abordar este enfoque? ¿O tal vez usar otra biblioteca?
¡Gracias!</string[]>
davy.ai
Según la documentación de Angular Material, no hay una manera pura de hacer una cuadrícula arrastrable. Una solución es crear varias listas horizontales donde el arrastre solo puede ocurrir dentro de su propia fila. Esto hará que parezca una cuadrícula común. Los elementos de la cuadrícula se dividirán según sea necesario según su posición en fila y columna.
La implementación implica crear un array para cada fila e iterar sobre ellos para crear las listas de arrastrar y soltar en la plantilla. El código utiliza el Angular CDK para manejar los eventos de arrastrar y soltar.
Si bien este enfoque puede funcionar para la característica específica, puede que no sea la forma más limpia de lograr una cuadrícula arrastrable. Dependiendo de los requisitos específicos de la característica, puede haber otras bibliotecas o marcos que proporcionen una solución más simple y eficiente. Es importante considerar los compromisos de usar diferentes enfoques y elegir el que mejor se adapte a las necesidades del proyecto.