如何从 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” 属性来实现要求，它连接多个拖放区。

根据angularIf you have an unknown number of connected drop lists, you can use the cdkDropListGroup directive to set up the connection automatically. Note that any new cdkDropList that is added under a group will be connected to all other lists automatically

在放置容器中，我不能使用 mat-tree，因为它需要一个无法动态定义的数据源属性（截至目前我知道）。而在我的例子中，我想要动态地多个拖放区，所以我使用了“div”

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

drag-n-drop-treelist

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

How to get mat-tree-node element from drop event in the mat-tree in Angular2+?

javascript

jquery

angular-material2

angular