下面是一个示例代码,演示了如何在动态列表之间使用cdkDropList
。
首先,确保你已经安装了@angular/cdk
库。
import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop-example',
template: `
{{ item }}
{{ item }}
`,
styles: [`
.container {
display: flex;
justify-content: space-between;
width: 400px;
}
.list {
border: 1px solid #ccc;
min-height: 200px;
width: 45%;
padding: 10px;
}
`]
})
export class DragDropExampleComponent implements OnInit {
list1 = ['Item 1', 'Item 2', 'Item 3'];
list2 = ['Item 4', 'Item 5', 'Item 6'];
constructor() { }
ngOnInit() { }
drop(event: CdkDragDrop) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
DragDropModule
:import { NgModule } from '@angular/core';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
DragDropModule
],
declarations: [
DragDropExampleComponent
]
})
export class YourModule { }
现在,你可以在你的模板中使用
来展示动态列表之间的拖放功能。
这是一个基本的示例,你可以根据你的需求进行进一步的定制和修改。