在Angular CDK的拖放功能中,确实存在移动源项目的问题。当我们在拖动项目时,默认情况下,源项目会在其原始位置上留下一个空白的占位符。如果我们希望在拖动源项目时不移动它,我们可以通过以下方法解决:
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
items
的数组:items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
drop
方法来处理拖放事件。在该方法中,我们可以使用transferArrayItem
函数将源项目从原始位置转移到目标位置,而不是移动源项目。完整的drop
方法如下所示: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);
}
}
{{item}}
通过以上步骤,我们可以实现在拖动源项目时不移动它,而是通过transferArrayItem
函数将其从原始位置转移到目标位置。