cdkDropList变得混乱

Question

我有一个嵌套的拖放列表，如下所示：

当我尝试拖动A（又名A1，A2，A3）中的项目时，视图会疯狂地闪烁。 您可以在此https://stackblitz.com/edit/angular-drag-and-drop-pvnq2q?file=src/app/app.component.html

上对其进行测试

当我在A的孩子中拖动B或C时，会发生相同的行为

如何解决此问题：

<div #doneList="cdkDropList" [cdkDropListConnectedTo]="[todoList]" cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" cdkDrag>
        <div>A</div>
        <div #todoList="cdkDropList" [cdkDropListConnectedTo]="[doneList]" cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
            <div class="example-box" cdkDrag>A1</div>
            <div class="example-box" cdkDrag>A2</div>
            <div class="example-box" cdkDrag>A3</div>
        </div>
    </div>
    <div class="example-box" cdkDrag>B</div>
    <div class="example-box" cdkDrag>C</div>
</div>