Nebular Tree Grid 拖放重新排列节点-解网

问：

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

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

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

我的目标是清楚地了解拖动了什么元素以及它放在哪里。（在元素下方或上部）

如果我在和之间拖动，我需要信息 “2.1 元素必须放在 1.1 元素之后”2.1 Element1.1 Element1.2 Element

Nebular Tree Grid 可能吗？

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

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

棱角分明的星云树网格

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

答：

2赞 Gianluca Elia 3/25/2022 #1

如果你使用的是 Angular，我认为这是因为使用了 Nebular，请查看这个关于使用 Angular cdk 拖放指令的页面：

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

它与 Nebular Tree Grid 配合得很好，而且相当容易，以下是向 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>

编辑：注意 .我在控制器中使用它来了解哪个元素被丢弃，而不是哪个其他元素。由于我们从删除事件中得到的只是拖动项的当前和上一个索引，因此我们需要跟踪表中每一行的当前索引。我找不到其他方法从 .以下是一些控制器代码，可以为您提供一些想法[cdkDragData]trNbTreeGridDataSource

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

}

上一个：Angular Visual Studio Code 调试器未命中断点

下一个：Angular - 通过上下文将操作传递给 ng-template

Nebular Tree Grid 拖放重新排列节点

Nebular Tree Grid Drag and Drop rearranging Nodes

评论