angular - Angular 材质 CdkDragPreview 输入

Question

我已经为我的 Angular Material Table 实现了 CdkDrag，每个 mat-cell 都是一个输入（mat-form-field）。

<mat-cell cdkDropList>

    <mat-form-field>
    <input
                  cdkDrag
                  cdkDragLockAxis="y"
                />
    </mat-form-field>

</mat-cell>

关键是将一个单元格复制到另一个单元格。功能通过 cdkDropListEntered 发射器工作和完成。但是，我正在尝试使用属性 CdkDragPreview 和 CdkDragPlacholder。这些需要在 cdkDrag 内，但是由于它是输入并且没有结束标记，因此我无法放置 cdkDragPreview 元素（不会显示）。试图将 cdkDrag 属性放在 mat-form-field 中，但是拖放根本不起作用。

总体要点是将拖动的 mat-cell 视觉保持在同一个单元格中，而不是显示拖动动画。谢谢。

Answer 1

尝试<input>用另一个<div>.

<mat-cell cdkDropList>
  <div cdkDrag cdkDragLockAxis="y">
    <mat-form-field>
      <input ...>
      <div *cdkDragPreview> ... </div>
    </mat-form-field>
  </div>
</mat-cell>