在Angular 12中,要实现使用占位列表的替换列表的拖放效果,可以使用Angular CDK(Component Dev Kit)中提供的DragDrop模块。
以下是一个使用replace-list实现拖放效果的示例代码:
在app.component.html中添加以下代码:
{{item.name}}
Placeholder
在app.component.ts中添加以下代码:
import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
list = [
{name: 'Item 1'},
{name: 'Item 2'},
{name: 'Item 3'},
];
placeholder = true;
drop(event: CdkDragDrop) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
event.container.data.splice(event.currentIndex, 0, event.previousContainer.data[event.previousIndex]);
event.previousContainer.data.splice(event.previousIndex, 1);
}
}
}
在以上代码中,使用了两个cdkDropList元素来分别代表列表和占位列表。在拖拽过程中,选择放置的位置时,会出现