当使用样式变换时,Angular Material拖放可能会导致拖动错误项目的问题。以下是一个可能的解决方法的代码示例:
import {DragDropModule} from '@angular/cdk/drag-drop';
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
cdkDropList
指令将列表设置为可拖放的容器,并使用cdkDrag
指令将每个项目设置为可拖动的元素:
{{item}}
onDrop
方法来处理拖放事件。在该方法中,你可以检查拖动的项目是否符合你的条件,并根据需要执行操作:onDrop(event: CdkDragDrop) {
// 获取拖动的项目和目标容器
const draggedItem = event.item.data;
const container = event.container.data;
// 检查拖动的项目是否符合条件
if (container === 'some condition') {
// 执行操作
} else {
// 拒绝拖放
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}
在这个示例中,我们使用cdkDropListDropped
事件来监听拖放操作。event.item.data
表示被拖动的项目,event.container.data
表示目标容器。
在onDrop
方法中,我们检查了拖动的项目是否符合我们的条件。如果符合条件,我们执行操作;否则,我们使用moveItemInArray
函数将项目移回到原来的位置,以拒绝拖放。
请注意,这只是一个示例,你可以根据你的实际需求进行调整和扩展。