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

Question

I have a requirement where I need to implement drag and drop between two containers which have a tree-like structure. One container is TODO, the Other is Done. It's working but dropped data always getting attach to node 1 of the Container 2(Done) because I don't know how to find the dropped container node index?

Here is code. Working demo can be found 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);

Drag "Other" and drop into "Done" container now open Node 1. you will be able to see the dropped element.

Requirement : I want to drag from TODO container and want to drop into the exact Node of the container 2. Quick help will be really appreciated.

Answer 1

Ok, Finally after some research I am able to achieve the requirement by using "div" and " cdkDropListGroup " property which connects multiple drop zone.

According to angular If 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 If 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

In the drop container, I can not use mat-tree because that requires a data-source property that can not be dynamically defined(As of now I am aware of). whereas in my case I wanted multiple drop zones dynamically, So I used " div "

Below is the working link, if someone requires this kind of implementation then refer to the below link. I hope this will save someone time.

drag-n-drop-treelist