下面是一个示例代码,演示如何使用Angular Material的DragDrop服务来创建一个拖放列表:
npm install @angular/material @angular/cdk
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';
import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
DragDropModule,
MatListModule
]
})
export class AppModule { }
cdkDrag
指令将元素标记为可拖动,使用cdkDropList
指令将元素容器标记为可放置:
{{ item }}
drop()
方法来处理拖放事件。在drop()
方法中,您可以使用DragDrop服务的dropListData
属性来重新排列项目的顺序:import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
drop(event: CdkDragDrop) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}
以上代码将创建一个包含可拖动和可放置项的列表。当您拖动列表中的项目时,它们的顺序将根据拖放操作进行重新排列。