如何从Angular2 +的mat-tree中的drop事件中获取mat-tree-node元素? [英] How to get mat-tree-node element from drop event in the mat-tree in Angular2+?

问题描述

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

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

拖动其他"并放入完成"容器中，现在打开节点1.您将能够看到被删除的元素.

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

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

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.

推荐答案

好，最后，经过一些研究，我可以通过使用"div"和" cdkDropListGroup "属性来实现要求，该属性将多个拖放区.

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

根据角度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

在放置容器中，我无法使用mat-tree，因为这需要无法动态定义的数据源属性(到目前为止，我知道).而在我的情况下，我希望动态地放置多个放置区域，因此我使用了" div "

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.

拖动-n-drop-treelist

这篇关于如何从Angular2 +的mat-tree中的drop事件中获取mat-tree-node元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！