javascript - 如何从 Angular2+ 的 mat-tree 中的 drop 事件获取 mat-tree-node 元素？

Question

我有一个要求，需要在两个具有树状结构的容器之间实现拖放。一个容器是 TODO，另一个容器是 Done。它正在工作，但删除的数据总是附加到容器 2(完成)的节点 1，因为我不知道如何找到删除的容器节点索引？

这是代码。可以找到工作演示here

import './polyfills';

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from './material-module';

import {TreeFlatOverviewExample} from './app/tree-flat-overview-example';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TreeFlatOverviewExample],
  declarations: [TreeFlatOverviewExample],
  bootstrap: [TreeFlatOverviewExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

将“Other”拖放到“Done”容器中，现在打开节点 1。您将能够看到放置的元素。

要求:我想从 TODO 容器中拖动并拖放到容器 2 的确切节点中。快速帮助将不胜感激。

Answer 1

好吧，经过一番研究，我终于能够通过使用“div”和“cdkDropListGroup”连接多个放置区域的属性来实现要求。

根据 Angular 如果您有未知数量的连接下拉列表，则可以使用 cdkDropListGroup 指令自动设置连接。请注意，在组下添加的任何新 cdkDropList 将自动连接到所有其他列表

在放置容器中，我无法使用 mat-tree，因为这需要无法动态定义的数据源属性(据我所知)。而在我的例子中，我想要动态地设置多个放置区域，所以我使用了“div”

下面是工作链接，如果有人需要这种实现，请引用下面的链接。我希望这会节省某人的时间。

drag-n-drop-treelist