Перетащите с помощью Angular 7 CDK - PullRequest
Новая
       12

Перетащите с помощью Angular 7 CDK

0 голосов
/ 06 ноября 2018

Я пытаюсь использовать cdk перетаскивания Angular 7 для перетаскивания мат-карты. Мой код довольно сложный. Я создаю mat-grid динамически в соответствии с номером сетки (Raster - это свойство в JSON для этого - на немецком языке). Я хочу просто поменять мат-карту, встроенную в плитку, но когда я перетаскиваю одну карту из одного места в другое, меняется весь макет моей сетки. Я не хочу этого. Я просто хочу поменять карту с одного места на другое. Ниже мой код.

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>

raster.component.ts 

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


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

Я не понимаю, как это сделать только для мат-карт. Пожалуйста, помогите мне с этой проблемой.

...