Drag and Drop using Angular 7 cdk

I am trying to use Angular 7's drag and drop cdk to drag and drop mat-card. My code is quite complicated. I am creating mat-grid dynamically according to grid number (Raster is the property in JSON for this - in German). I want to just change the mat-card embedded in tile but when I drag one card from one place to another, entire layout of my grid changes. I dont want this. I just want to change the card from one postion to another. Below is my code.

Raster.component.html

<mat-grid-list cdkDropList class="example-list z-depth-5" cols="3" rowHeight="180px" gutterSize="8px" (cdkDropListDropped)="drop($event)">
  <mat-grid-tile class="example-box z-depth-4" *ngFor="let tile of tiles; let i = index" [colspan]="tile.cols" [rowspan]="tile.rows" cdkDrag>
    <mat-card class="add-new-flyer" *ngIf="tile.flyer == '-1'" id="p_{{tile.flyer}}">
      <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="space-evenly">
        <div fxLayout fxLayout fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="10px" fxLayoutGap.xs="0">
          <div class="button">
            <button mat-mini-fab (click)="addNewWerbedata(tile.text)">
              <mat-icon>add</mat-icon>
            </button>
          </div>
        </div>
      </div>
    </mat-card>
    <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" id="p_{{tile.text}}">
      <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="left" fxLayoutGap="10px" fxLayoutGap.xs="0">
        <div class="item" fxFlex="50%" fxFlex fxFlexOffset="10px" fxFlexOffset.xs="0">
          <div class="event-infos">
            <p class="article">
              <mark>{{ flyers[tile.flyer].Filiale }}{{ flyers[tile.flyer].ArtNr }}</mark>
            </p>
            <p>
              <b>{{ flyers[tile.flyer].Produktname }}</b>
            </p>
            <p>
              {{ flyers[tile.flyer].Werbetext }}
            </p>
            <p>
              <b>{{ flyers[tile.flyer].EUR_VK }} &euro;</b>
            </p>
            <p>
              {{ flyers[tile.flyer].VK_Einheit }} {{''}} {{ flyers[tile.flyer].EUR_VK_Einheit }}
            </p>
          </div>
        </div>
        <div class="grid" fxFlex="50%">
          <div class="item photo">
            <img class="photothumb" [src]="flyers[tile.flyer].Bild_1" (click)="openDialog(flyers[tile.flyer].Bild_1)">
          </div>
        </div>
      </div>
      <div class="show-image">
        <button class="update" mat-mini-fab color="warn" matTooltip="BEARBEITEN" (click)="addWerbedata(flyers[tile.flyer].Filiale + flyers[tile.flyer].WERBE_NR)">
          <mat-icon>edit</mat-icon>
        </button>
        <button class="search" mat-mini-fab color="warn" matTooltip="ZUM WERBEDATENSATZ SPRINGEN" [routerLink]="['/rullko/werbedata/details', flyers[tile.flyer].Filiale + flyers[tile.flyer].WERBE_NR]">
          <mat-icon>search</mat-icon>
        </button>
        <button class="move" mat-mini-fab color="warn" matTooltip="POSITION VERSCHIEBEN">
          <mat-icon>control_camera</mat-icon>
        </button>
      </div>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>

Select allOpen in new window

raster.component.ts

export class RasterComponent implements OnChanges {
@Input() flyers: any[];
tiles: Tile[] = [];


  drop(event: CdkDragDrop<Tile[]>) {
    moveItemInArray(this.tiles, event.previousIndex, event.currentIndex);
  }
}

Select allOpen in new window

I am not understanding how to do this for mat-card only. Please help me with this issue.