输入

如何解决输入

我已经为我的 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 视觉上保持在同一单元格中，而不是显示拖动动画。 谢谢。

解决方法

尝试用另一个 <input> 封闭您的 <div>。

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