以下是一个使用Angular 8实现将文件或文件夹拖放到另一个文件夹中的示例代码:
npm install @angular/cdk
npm install @angular/flex-layout
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
// ...
DragDropModule,
FlexLayoutModule
],
// ...
})
export class AppModule { }
{{ folder.name }}
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
export class AppComponent {
folders = [
{ name: 'Folder 1' },
{ name: 'Folder 2' },
{ name: 'Folder 3' }
];
onDrop(event: CdkDragDrop) {
moveItemInArray(this.folders, event.previousIndex, event.currentIndex);
}
}
上述代码中,我们使用了cdkDropList
指令来指定拖放的容器,cdkDropListDropped
事件在拖放完成时触发。我们还使用了cdkDrag
指令来指定可拖动的元素。
当拖放完成时,onDrop()
方法会被调用,我们使用moveItemInArray()
函数来重新排列文件夹列表中的元素。
请注意,你需要根据自己的实际需求进行调整和修改代码。