如何在 Angular 材料中构建网格拖放而不是仅对列表进行排序答案

【问题标题】：How to build a grid drag and drop in Angular material instead just sorting a list如何在 Angular 材料中构建网格拖放而不是仅对列表进行排序
【发布时间】：2022-12-24 23:28:21
【问题描述】：

根据角度材料文档，没有一种纯粹的方法来制作网格拖放。因此，我认为的一种解决方案有点棘手，但足以满足我的功能需求。这是关于多个水平列表（我可以在其中拖动它自己的行）。最后它看起来像一个普通的网格。我有每个网格元素的行和列位置，这意味着我拆分了尽可能多的行。假设有 4 个元素：

const Grid = [
    {
        name: "hello",
        row: 1,
        column: 1,
    },
    {
        name: "world",
        row: 1,
        column: 2,
    },
    {
        name: "I am",
        row: 2,
        column: 1,
    },
    {
        name: "here",
        row: 2,
        column: 2,
    }
]

所以我将为每一行设置 1 个数组，然后它将按照以下代码在模板中漫游：

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

enter image description here

我的问题是。这种方法有更清洁的方法吗？或者也许使用另一个图书馆？

谢谢！

【问题讨论】：

不知道this old SO能不能帮到你。这个想法是每个项目都是一个 cdkDragList

标签： angular angular-material drag-and-drop grid drag

【解决方案1】：

对于有棱角的材料，很难在网格中使用拖放操作。但是 ngx-explorer-dnd 库可以帮助你。我是作者，lib 的灵感来自 cdkDrag。

你可以在Stackblitz上测试它。

它目前是一个 alpha，但正在积极开发中！

【讨论】：