具有 native CDK 的 Angular 7 拖放嵌套列表

我正在使用 @angular/cdk/drag-drop 提供的原生 Angular 7 拖放。

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

<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>

这是一个非常示意性的例子，只是为了说明目的。

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

如何在不借助第 3 方软件包的情况下解决这个问题？

最佳答案

我认为您需要在 cdkDrag 内的元素上使用拖动 handle (cdkDragHandle)，至少对于父列表。

https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle

关于具有 native CDK 的 Angular 7 拖放嵌套列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53120167/