角度拖放：如何防止将某项拖放到不需要的列表中

Question

我正在尝试使用the drag and drop feature provided by angular material将项目从选项列表移动到 Incude 或 Exclude >列表（是否启用了任何功能，具体取决于移动位置组中选中的单选按钮）

到目前为止，它仍然有效，但是仅启用Include列表时有些奇怪。

如果我尝试将某个项目移至排除列表中，而不是将其返回到 Options 列表中，则将其添加到 Include < / strong>列表。仅当我拖动项目而不将鼠标悬停在“包含”列表上时，它才能按预期工作。

当我想要将项目拖放到另一个列表中时，有什么方法可以防止将该项目拖放到包含列表中吗？

顺便说一句，这与禁用排除列表无关。我已经测试了启用了两个列表的情况，并始终赢得我将项目拖放到所需列表时传递的第一个列表。

Here's a demo in stackblitz

Answer 1

拖放库将保存最后一个活动容器，并在拖放时向其中添加可拖动项。这意味着，如果将某项拖到包含列表上，然后再将其拖放到无效的排除列表中，则最后一个活动容器仍为包含列表。

可以在您的放置方法中使用event.isPointerOverContainer来检查它是否被放置在放置容器之外。这样做的缺点是动画仍会先将该项返回到 Include 列表中。