0

I have implemented CdkDrag for my Angular Material Table, Every mat-cell is an input (mat-form-field).

<mat-cell cdkDropList>

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

</mat-cell>

The point is to copy one cell to another cells. Functionality is working and done via cdkDropListEntered emitter. However, i'm trying to use the properties CdkDragPreview and CdkDragPlacholder. These needs to be inside the cdkDrag, However since it's an input and there is no closing tag, I can't place the cdkDragPreview element (won't show). Tried to place the cdkDrag property in the mat-form-field but then the drag and drop not working at all.

The overall point is to keep the dragged mat-cell visualwise in the same cell and not to show the dragging animation. Thanks.

Or05230
  • 83
  • 9

1 Answers1

0

Try enclosing your <input> by another <div>.

<mat-cell cdkDropList>
  <div cdkDrag cdkDragLockAxis="y">
    <mat-form-field>
      <input ...>
      <div *cdkDragPreview> ... </div>
    </mat-form-field>
  </div>
</mat-cell>
N.F.
  • 3,844
  • 3
  • 22
  • 53
  • Thanks, But when i apply that i can't "grab" the input and move it. Probably the input is over the div with the cdkdrag and therfore can't be moved. – Or05230 Jul 01 '21 at 10:50