Javascript 如何从Angular2+；中mat树的drop事件中获取mat树节点元素；？

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

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

拖动“Other”并放入“Done”容器，现在打开节点1。您将能够看到删除的元素

要求：我想从TODO容器中拖动，然后放到容器2的确切节点中。

---

非常感谢您的快速帮助。

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

根据angular

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

在drop容器中，我不能使用mat-tree，因为这需要一个不能动态定义的数据源属性（到目前为止我知道）。而在我的例子中，我需要多个动态放置区域，所以我使用“div”

下面是工作链接，如果有人需要这种实现，请参考下面的链接。我希望这能节省一些时间

---

所以如果我在

节点2

上拖动

Security

，那么is应该附加到节点2，对吗？@Plochiecorrect@Plochie如果Container 2节点正在动态创建来自API的数据，您会怎么做？我也认为有多个drop zone节点也是如此，但由于mat tree所需的数据源属性而被卡住。在动态节点列表的情况下，不确定如何执行此操作。此外，创建多个数据源可能会导致性能问题。您应该接受此答案，以便得出结论。

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