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

问题

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.

回答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

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

来源：https://stackoverflow.com/questions/59386696/how-to-get-mat-tree-node-element-from-drop-event-in-the-mat-tree-in-angular2

标签

javascript

jquery

angular

angular-material2