cdkDragHandle 在子组件中不起作用

Question

使用@angular/cdk 7.2.1：如果定义一个包含cdkDropList 和cdkDrag 组件嵌套列表的父组件，则在嵌套子组件中定义cdkDragHandle 不起作用。如果相同的结构都在同一个组件中，cdkDragHandle 完美工作。

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

有没有人找到使 cdkDragHandle 工作的修复程序，即使它没有在与 cdkDrag 相同的组件中定义？

Answer 1

这个解决方案对我有用：

父组件：

<div cdkDropList #list="cdkDropList"
  [cdkDropListData]="myArray"
  (cdkDropListDropped)="drop($event)">

  <app-item
    *ngFor="let item of myArray"
    cdkDrag>
    <div cdkDragHandle></div>
  </app-item>

</div>

子组件（应用程序项）：

<div class="drag-container">
  <ng-content></ng-content>
  <div class="drag-handle">drag here</div>
</div>

然后在父组件中设置 cdk-drag-handle class 的样式。 cdk-drag-handle自带material，所以我们不需要手动应用：

.cdk-drag-handle {
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 100;
   background-color: transparent;
   cursor: move;
 }

然后使用 position: relative 和任何你想要的样式来设置拖动容器的样式。我在里面有一个项目（拖动手柄），它也占据了容器的整个宽度和高度，其中包含一个图像（就像旁注）。

Answer 2

这对我有用：不使用 cdkDragHandle，只需停止鼠标按下事件传播，如下所示。那么只能拖header了。

<div>
  <header></header>
  <body (mousedown)="$event.stopPropagation()"></body>
</div>

Answer 3

不确定这是什么时候添加的，设置 cdkDragRootElement 对我有用。

在子组件中<div cdkDrag cdkDragRootElement="app-bot-prompt-selector">app-bot-prompt-selector是需要拖拽的父元素

https://material.angular.io/cdk/drag-drop/api#CdkDrag

cdkDragHandle 在子组件中不起作用

cdkDragHandle doesn't work inside child component

drag-and-drop

angular

angular-cdk