我正在使用Angular Material拖放来组成一个表单设计器。我的问题是，在启用拖放功能后，没有嵌套拖放的项目排序将停止工作。
我想列出一个组件列表，这些组件可以存在于根级别，也可以分组在部分下。我试图使元素
- 在组和根级别中拖动以进行排序
- 在组之间拖动
- 在根级别和各个组之间拖动
- 以及要通过拖动进行排序的组
我通过cdkDropListConnectedTo连接组，连接根级别和组之间的项目来实现这一点。问题是，一旦我启用了根级别列表与子组交互，组中元素的排序就不再有效了(尽管根级别排序很好)。
我已经通过Stacklitz做了一个问题的例子。去掉根的ID可以进行排序，但我不能将组中的项目拖回根列表。
<div
[id]="rootDragDropName" <-- taking this line out fixes the sorting but I can't drag items back into this area
cdkDropList
[cdkDropListData]="formFields"
(cdkDropListDropped)="dropItem($event)"
[cdkDropListConnectedTo]="getConnectedList()"
>
我这哪里错了？我看到过其他例子，其中嵌套的拖放在运行时动态更改，但在我看来，我不需要走那么远，当前的标记(类似于这个例子)应该可以达到我想要的结果。
我已经在这个Stacklitz 中更新了您的示例
关于这个问题的详细讨论可以在Github上找到。