Angular 拖放：Enter predicate 可以验证项目被拖放到哪个索引处吗？

Question

我正在使用 Angular DragDropModule，我想将一个对象从一个列表拖到另一个列表。这工作得很好，但我需要我的对象只在到达列表的第一个或最后一个索引处被删除。示例 here 显示了一个带有 Enter 谓词的数字列表，该谓词只允许精灵数字，但我想知道如何解决我的问题。

希望我说得足够清楚。如果你知道除了使用 predicate 以外的其他方法来解决我的问题，那也很好。

谢谢！

Answer 1

有 cdkDropListEnterPredicate 属性用于查找谓词您的位置。

在您的 Html 丢弃的元素中：

[cdkDropListEnterPredicate]="evenPredicate"

在你的 Ts 文件中：

evenPredicate(item: CdkDrag<number>) {
  return item.data === 1|| item.data === 6;
}

在这里，数据是我们数组的索引。 item.data === 1 是第一个位置，item.data === 6 是给定数组的最后一个位置。

参考：Sample 让我知道它是否工作正常。

谢谢。

Answer 2

我想我只是找到了解决问题的方法。事件 cdkDropListDropped 提供了一个“currentIndex”属性，表示项目刚刚被删除的索引，所以在“drop”函数中，我刚刚在传输项目之前添加了下面的验证：

drop(event: CdkDragDrop<Object[]>) {
   if (event.currentIndex === 0 || event.currentIndex === arrivalList.length) {
       ...
       ...
       ...
    }
}

我希望我解释得很好并且它会对某人有所帮助。

Angular 拖放：Enter predicate 可以验证项目被拖放到哪个索引处吗？

Angular Drag and Drop: can Enter predicate verify at which index the item is dropped?

angular

predicate

angular-cdk-drag-drop