在Angular 8中实现嵌套拖放可以使用ngx-dnd库。以下是一个示例解决方法:
首先,安装ngx-dnd库:
npm install ngx-dnd --save
创建一个新的Angular组件,例如NestedDragDropComponent:
ng generate component NestedDragDrop
在NestedDragDropComponent的HTML文件中,添加拖放区域和拖动项的代码:
Drag Me
Drop Here
{{ item }}
在NestedDragDropComponent的组件类中,添加拖放操作的逻辑:
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-drag-drop',
templateUrl: './nested-drag-drop.component.html',
styleUrls: ['./nested-drag-drop.component.css']
})
export class NestedDragDropComponent {
droppedItems: string[] = [];
onDragSuccess(event: any) {
// 移除拖动项
const index = this.droppedItems.indexOf(event.dragData);
this.droppedItems.splice(index, 1);
}
onDropSuccess(event: any) {
// 添加拖动项到拖放区域
this.droppedItems.push(event.dragData);
}
onNestedDragSuccess(event: any) {
// 在嵌套拖放中移除拖动项
const index = this.droppedItems.indexOf(event.dragData);
this.droppedItems.splice(index, 1);
}
}
在父级组件的HTML文件中,使用NestedDragDropComponent:
这样,你就可以在Angular 8中实现嵌套拖放了。当你将一个拖动项拖放到拖放区域中,它会被添加到拖放区域,并且你可以在拖放区域中重新排序或移除拖动项。如果你在拖放区域中拖动一个拖动项,它会被移除。