使用本机CDK的Angular 7拖放嵌套列表

我正在使用@angular/cdk/drag-drop提供的本机Angular 7拖放.

I am using native Angular 7 Drag&Drop provided by @angular/cdk/drag-drop.

基本上，我只需要在另一个列表中创建一个可排序列表，如下面的代码所示:

Basically, I just need to create one sortable list inside another one as in the code below:

<div class="external-list" cdkDropList (cdkDropListDropped)="drop1($event)">
  <div class="external-item" cdkDrag *ngFor="let item of items">
    {{item.header}}
    <div class="internal-list" cdkDropList (cdkDropListDropped)="drop2($event)">
      <div class="internal-item" cdkDrag *ngFor="let row of item.rows">
        {{row}}
      </div>
    </div>
  </div>
</div>

这是一个非常示意性的示例，仅用于说明目的.

问题是，当我尝试拖动内部项目时，外部项目被拖动了.

The problem is when I try dragging the inner items outer ones are dragged instead.

在不诉诸第三方软件包的情况下如何解决此问题?

How can I solve this without resorting to 3rd-party packages?