星云树网格拖放重新排列节点答案

【问题标题】：Nebular Tree Grid Drag and Drop rearranging Nodes星云树网格拖放重新排列节点
【发布时间】：2022-01-15 00:32:05
【问题描述】：

我正在寻找用于重新排列分层表数据的星云树网格拖放选项的解决方案。

嵌套节点的示例（在我的例子中，层次结构要大一些）：

1章
- 1.1 元素
- 1.2 元素
2章
- 2.1 元素

我的目标是清楚地了解拖动的元素以及放置的位置。（下-上-或元素上）

如果我在1.1 Element 和1.2 Element 之间拖动2.1 Element，我需要该信息 "2.1 元素必须放在 1.1 元素之后"

星云树网格可以做到吗？

目前我发现的是https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure?file=src%2Fapp%2Fapp.component.ts

但我仍然没有让它与我的星云树网格一起运行，所以我希望你们中的一些人已经这样做了:)

【问题讨论】：

请edit您的问题标题描述您遇到的问题或您提出的问题。您当前的标题是标签中已有信息的重复加上“拖放”，这本身没有意义。您的标题应该足够清晰和具有描述性，以便对正在浏览搜索结果列表以试图找到问题解决方案的未来网站用户有意义，并且您当前的标题没有提供任何有用的信息。谢谢。

标签： angular nebular treegrid

【解决方案1】：

如果您使用的是 Angular，我假设是因为使用了 Nebular，请查看此页面关于使用 Angular cdk 拖放指令：

https://v7.material.angular.io/cdk/drag-drop/api

它与 Nebular Tree Grid 一起玩得很好而且相当简单，下面是添加拖放到 nbTreeGrid 的代码如下所示：

<table [nbTreeGrid]="_tableData" cdkDropList
    (cdkDropListDisabled)="!draggable" cdkDropListLockAxis="y"
    (cdkDropListSorted)="onDrag($event) 
    (cdkDropListDropped)="onDrop($event)">

    <tr cdkDrag nbTreeGridRow 
        *nbTreeGridRowDef="let row; let i = index; columns: _tableDataColumns"
        [cdkDragData]="{index: i, data: row.data}">
    </tr>

编辑：注意tr 上的[cdkDragData]。我在我的控制器中使用它来知道哪个元素被丢弃而不是其他元素。由于我们从放置事件中得到的只是被拖动项目的当前和前一个索引，因此我们需要跟踪表中每一行的当前索引。我找不到从NbTreeGridDataSource 获取此信息的其他方法。这里有一些控制器代码可以给你一个想法

import { CdkDrag } from '@angular/cdk/drag-drop'

@Component()
export class DropListComponent {
    // we'll need to access all drag items to get their dragData
    @ViewChildren(CdkDrag) private rows: QueryList<CdkDrag>;

    // this is called during drag every time list elements are rearranged
    onDrag(event) {
        const {index: sourceId, data: sourceData} = event.item.data
        const target =  this.rows.find(el=> el.data.index == event.currentIndex).data
        const {index: targetId, data: targetData} = target
        console.log(`Dropped items ${sourceId} to ${targetId}.`)
        console.log('SOURCE', sourceData)
        console.log('TARGET', targetData)
    }

}

【讨论】：