Sim*_*mon 10 drag-and-drop angular angular-cdk
使用@angular/cdk 7.2.1：如果定义一个包含 cdkDropList 和嵌套的 cdkDrag 组件列表的父组件，则在嵌套的子组件中定义 cdkDragHandle 不起作用。如果相同的结构都在同一个组件中，则 cdkDragHandle 可以完美地工作。
https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html
即使没有在与 cdkDrag 相同的组件中定义，是否有人找到了使 cdkDragHandle 工作的修复程序？
laj*_*uma 19
这个解决方案对我有用：
父组件：
<div cdkDropList #list="cdkDropList"
[cdkDropListData]="myArray"
(cdkDropListDropped)="drop($event)">
<app-item
*ngFor="let item of myArray"
cdkDrag>
<div cdkDragHandle></div>
</app-item>
</div>
子组件（app-item）：
<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;
}
然后使用 position:relative 和任何你想要的样式设置拖动容器。我在里面有一个项目（拖动手柄），它也占用容器的整个宽度和高度，其中包含一个图像（作为旁注）。
小智 6
这对我有用：不使用 cdkDragHandle，只需停止鼠标按下事件传播，如下所示。然后只能拖动标题。
<div>
<header></header>
<body (mousedown)="$event.stopPropagation()"></body>
</div>| 归档时间： |
|
| 查看次数： |
7058 次 |
| 最近记录： |