Перетаскивание мат-карты в мат-сетку с помощью ng2-dragula - PullRequest
Новая
       81

Перетаскивание мат-карты в мат-сетку с помощью ng2-dragula

0 голосов
/ 30 августа 2018

У меня есть сетка 6, которая зависит от массивов флаеров. Внутри этой сетки у меня есть карточки для каждого флаера. Я хочу изменить положение моей карты с плитки на плитку.

Я использую ng2-dragula и прошел через все это.

Моя проблема в том, что когда я перетаскиваю одну карту из одной плитки, она переходит в другую, но текущая карта на этой плитке не занимает позицию предыдущей карты.

Я реализовал это, добавив компонент плиток, в котором есть компонент импорта флаера. Затем я использую текстовое поле из плитки для отображения положения флаера из массива флаеров, и если в флаере нет позиции, я заполняю эту плитку пустой карточкой.

Пожалуйста, помогите мне сделать это. Я был бы очень признателен. Есть ли другой способ сделать это? Я пытаюсь использовать все вещи, упомянутые в https://valor -software.com / ng2-dragula / , но ничего не работает.

Ниже мой код.

Raster.component.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>

Raster.component.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();
        }
      }
    }
  }
...