以下是一个使用Angular CDK拖放实现嵌套投放列表的示例代码:
首先,需要在Angular项目中导入Angular CDK模块:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
// other imports
DragDropModule
],
// other configurations
})
export class AppModule { }
然后,在组件的HTML文件中,创建两个嵌套的投放列表:
{{ todo }}
{{ done }}
在组件的TypeScript文件中,定义投放列表的数据和一些操作方法:
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
todos = ['Todo 1', 'Todo 2', 'Todo 3'];
dones = ['Done 1', 'Done 2', 'Done 3'];
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);
}
}
}
最后,为组件的投放列表绑定cdkDropListDropped
事件和drop
方法:
现在,你可以在应用中使用嵌套的投放列表并实现拖放功能了。当你拖动一个项目时,它将被移动到另一个列表中。