首页 > 解决方案 > 角度拖放:如何防止项目被拖放到不需要的列表中

问题描述

我正在尝试使用angular material 提供的拖放功能,以便能够将选项列表中的项目移动到包含排除列表(取决于在Where to move组中选择的单选按钮启用的内容)

在此处输入图像描述

到目前为止它可以工作,但是当只Include启用列表时会有一些奇怪的事情。

如果我尝试将一个项目移动到排除列表,而不是返回到选项列表的项目,它被添加到包含列表中。只有当我拖动项目而不将鼠标悬停在包含列表上时,它才会按预期工作。

在此处输入图像描述

当我想要做的是将它放到另一个列表中时,有什么方法可以防止该项目被放入包含列表中?

顺便说一句,这与禁用排除列表无关。我已经在启用两个列表的情况下对此进行了测试,并且总是赢得我在将项目放入所需列表的过程中传递的第一个列表。

这是stackblitz中的一个演示

标签: angularangular-materialangular-cdk-drag-drop

解决方案


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

可以event.isPointerOverContainer在你的 drop 方法中使用它来检查它是否被丢弃在一个 dropcontainer 之外。这样做的缺点是动画仍然首先将项目返回到包含列表。


推荐阅读