Angular 7拖放嵌套列表与本机CDK答案

【问题标题】：Angular 7 Drag&Drop nested lists with native CDKAngular 7拖放嵌套列表与本机CDK
【发布时间】：2019-04-06 19:01:00
【问题描述】：

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

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

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

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

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

如何在不求助于 3rd-party 包的情况下解决这个问题？

【问题讨论】：

标签： angular drag-and-drop angular7

【解决方案1】：

我认为您至少需要在父列表中使用拖动句柄（cdkDragHandle 在cdkDrag 内的元素上）。

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

【讨论】：

感谢您的回答。我相信有可能实现所需的行为，但这可能需要一些肮脏的解决方法，包括布局返工（将子可拖动元素从父可拖动元素中移出并使用position: absolute 将它们放置到正确的位置）。