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

这对我有用：无需使用cdkDragHandle，只需停止鼠标按下事件的传播即可。然后只能拖动标题。

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

Answer 2

不确定何时添加，在孩子中设置cdkDragRootElement对我有用。

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

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

Answer 3

此解决方案对我有用：

父项：

<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类的样式。 cdk-drag-handle随附材料，因此我们不需要手动应用它：

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

然后使用以下位置对拖动容器进行样式设置：相对和任何您想要的样式。我内部有一个项目（拖动句柄），该项目也占用了容器的整个宽度和高度，其中包含图像（仅作为旁注）。

cdkDragHandle在子组件中不起作用

3 个答案: