悬停其他cdkDropList之后如何将cdkDrag移回原始位置?

时间:2020-08-21 09:25:01

标签: angular-cdk-drag-drop

您可能已经知道或注意到,将cdkDrag元素拖放到其原始容器之外时,将其拖放到某处(不在cdkDropList上),它将被自动拉回到其原始容器中。

问题

每当您在拖动cdkDropList元素时将鼠标悬停在另一个cdkDrag上时,已经为该元素保留了一些空间,并且当您将cdkDrag元素放到某个地方(不在{{ 1}}),它将被拉到悬停的最后一个cdkDropList中。

问题

我的问题是,是否有可能使cdkDropList元素只要放到某个地方(而不是放在cdkDrag上),都可以放回到其原始容器(cdkDropList)中。

我尝试过的事情

  • 在整个区域周围创建一个大的cdkDropList,它将忽略掉任何类型的cdkDropList元素(因此它将首先放置在其中,然后返回到原始位置)

    问题:效率不高,不适用于我的解决方案

  • 检查鼠标是否放在其他cdkDrag上方,同时放下cdkDropList元素,只有在鼠标滑过时才收起

    问题(当悬停在外面时):它将首先被拉入最后一个悬停的cdkDrag ,然后跳入原始容器

  • 使用cdkDropList 检查cdkDropListEnterPredicate元素是否仍悬停在cdkDrag上方,并仅在其移入时启用投放

    问题:不起作用,该空间已被保留,放下后将其拉回

Stackblitz:

Click me

最终问题

当我将cdkDragList元素悬停在其他cdkDropList上的某个位置后,是否有办法将其直接(拉)回原始容器/ cdkDrag

0 个答案:

没有答案