嵌套cdkDropLists中的元素排序问题

如何解决嵌套cdkDropLists中的元素排序问题

我有一个带有几个cdkDropLists的Angular项目。其中一些嵌套在其他嵌套的内部（例如，节内部的节）。所有的dropList都已连接。

<div cdkDropList id="ewf" [cdkDropListConnectedTo]="conn"
                        >

<div cdkDrag>
  <div class="handle" cdkDragHandle></div>
  <div cdkDropList id="e" [cdkDropListdisabled]="false" [cdkDropListData]="todo" class="example-list" style="margin-bottom: 10px;" [cdkDropListConnectedTo]="['e','j','ewf']">
    <div class="example-Box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div cdkDrag>
  <div class="handle" cdkDragHandle></div>
  <div cdkDropList id="j" [cdkDropListSortingdisabled]="false" [cdkDropListData]="done" class="example-list" [cdkDropListConnectedTo]="['e']">
    <div class="example-Box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div> </div>

Live example

问题是，尽管我能够将cdkDrag从一个dropList拖到另一个dropList上，但我却无法在嵌套的cdkDropList中对cdkDrags进行排序（更改其顺序）（例如，在上例中的列表“ e”中） ）。