下面是一个使用Angular实现树形结构拖放的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent {
// 树形结构数据
treeData = [
{
id: 1,
name: 'Node 1',
children: [
{
id: 2,
name: 'Node 1.1',
children: []
},
{
id: 3,
name: 'Node 1.2',
children: []
}
]
},
{
id: 4,
name: 'Node 2',
children: []
}
];
// 拖放事件处理函数
onDragStart(event: DragEvent, node: any) {
// 设置拖动数据
event.dataTransfer.setData('application/json', JSON.stringify(node));
}
onDragOver(event: DragEvent) {
event.preventDefault();
}
onDrop(event: DragEvent, parent: any) {
event.preventDefault();
const nodeData = JSON.parse(event.dataTransfer.getData('application/json'));
// 在拖放目标节点下添加节点
parent.children.push(nodeData);
}
}
-
{{ node.name }}
-
{{ child.name }}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeComponent } from './tree.component';
@NgModule({
declarations: [
AppComponent,
TreeComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
以上代码演示了如何使用Angular实现树形结构的拖放功能。在TreeComponent中,通过使用拖放事件处理函数来实现拖放操作,并在拖放目标节点下添加拖动的节点。