Angular 材质 CdkDragPreview 输入答案

【问题标题】：Angular Material CdkDragPreview on InputAngular 材质 CdkDragPreview 输入
【发布时间】：2021-09-13 06:27:37
【问题描述】：

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

【问题讨论】：

标签： angular angular-material angular-cdk-drag-drop

【解决方案1】：

尝试将您的<input> 包含在另一个<div> 中。

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

【讨论】：

谢谢，但是当我申请时，我无法“抓取”输入并移动它。可能输入在带有 cdkdrag 的 div 上，因此无法移动。