我有一个 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();
}
}
}
}