如何使用 cdkDragHandle 使 mat-table 行拖放工作，以便只能使用句柄拖动该行？

Question

我发现了这个使用 angular cdk 将拖放添加到 mat-table 的 stackblitz 示例。但是，所需的行为是该行只能使用带有 cdkDragHandle 指令的元素拖动。在此示例中，您可以通过单击行上的任意位置来拖动元素。如何修改这一点，以便该行只能使用拖动手柄拖动？

https://stackblitz.com/edit/angular-igmugp

Answer 1

这是我针对此问题的解决方法：

1. 制作一个布尔值来控制是否cdkDrag应该被禁用。默认行为已禁用。
2. 一个添加mousedown，mouseup，touchstart，和touchend事件处理程序的cdkDragHandle切换控制。
3. 在 中cdkDrag，侦听cdkDragReleased事件以禁用cdkDrag拖动后的 。

副作用是处理您真正想禁用的项目变得更加困难（例如，为那些真正禁用的项目应用样式）。

代码如下所示：

• 组件类

  dragDisabled = true;

• cdk拖拽

<mat-row
  *matRowDef="let row; columns: displayedColumns"
  cdkDrag
  [cdkDragData]="row"
  [cdkDragDisabled]="dragDisabled"
  (cdkDragReleased)="dragDisabled = true"
></mat-row>

• cdkDragHandle

<mat-icon
  cdkDragHandle
  (touchstart)="dragDisabled = false"
  (touchend)="dragDisabled = true"
  (mousedown)="dragDisabled = false"
  (mouseup)="dragDisabled = true"
  >drag_indicator</mat-icon
>

Answer 2

对于这个复杂的问题，我发现了一个有点简单的问题。对于可拖动 tr 中的任何简单文本 td，我们可以使用pointer-events:none，它将禁用所有文本元素。

在手柄图标上，使用pointer-events:all，它将允许仅从图标进行拖动。

这也存在禁用所有锚点和按钮的问题。因此，对于图标和按钮，请执行以下操作

1. 使用 mouseDown 设置一个标志
2. 拖动开始时，检查拖动并抛出 mouseup 事件
3. 在拖动停止时，检查是否设置了标志并重置标志并返回

检查此 stackblits 的工作答案 https://stackblitz.com/edit/angular-rwzc76