0

我有一个 6 个网格,它依赖于传单阵列。在那个网格内,我的每张传单都有卡片。我想将我的卡片的位置从一个瓷砖更改为另一个瓷砖。

我正在使用 ng2-dragula 并经历了所有的事情。

我的问题是,当我从一张牌中拖出一张牌时,它会转到另一张牌上,但该牌上的现有牌没有占据前一张牌的位置。

我已经通过添加我有导入传单组件的瓷砖组件来实现这一点。然后我使用图块中的文本字段来映射传单数组中的传单位置,如果传单中没有位置,我将用空白卡填充该图块。

请帮我完成这件事。我将非常感激。有没有其他方法可以做到这一点?我正在尝试使用https://valor-software.com/ng2-dragula/中提到的所有内容,但没有任何效果。

下面是我的代码。

光栅组件.ts

<mat-grid-list>
    <mat-grid-tile *ngFor="let tile of this.tiles" [colspan]="tile.cols" [rowspan]="tile.rows" >
        <mat-card *ngIf="tile.flyer == '-1'">
            .....blank card.....
        </mat-card>
        <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" dragula="TILES" [(dragulaModel)]="tiles">
            ......Flyer cards.....
        </mat-card>
    <mat-grid-tile>
</mat-card-list>

光栅组件.ts

MANY_ITEMS = 'MANY_ITEMS';
subs = new Subscription();
public constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup("HANDLES", {
      moves: (el, container, handle) => {
        return handle.className === 'handle';
      }
    });
  }
  assignFlyertoTiles() {
    for (const tile of this.tiles) {
      for (let i = 1; i < this.flyers.length; i++) {
        if (tile.text === this.flyers[i].Pos) {
          tile.flyer = i.toString();
        }
      }
    }
  }
4

0 回答 0