Перетаскиваемая сетка angular - PullRequest
Новая
       55

Перетаскиваемая сетка angular

0 голосов
/ 14 апреля 2020

Я создаю сетку, которую можно переупорядочить, используя angular cdkdrag код, подобный этому 

       <div class="col-lg-12" style="display: flex;flex-direction: row;flex-wrap: wrap;">
            <div class="row show-grid" cdkDropList (cdkDropListDropped)="drop($event)">
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 stepList" *ngFor="let steps of list" cdkDrag>
                    <nb-card class="projectListItem" routerLink="/project/steps-detail">
                        <nb-card-header>
                            <nb-icon class="projectIcon" icon="behance-outline"></nb-icon>
                            <h6 style="margin-top: 10px;">{{steps.title}} {{steps.id}}</h6>
                        </nb-card-header>
                        <nb-card-body>
                            {{steps.desc}}
                        </nb-card-body>
                    </nb-card>
                </div>
            </div>
        </div>

и функция сбрасывания, подобная этой 

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

, она не работает как Как я и хотел, когда я перемещаю номер 1 в номер 4, он должен сделать номер 1 в позиции № 4, а номер 4 - в номер 3, номер 3 - в номер 2, а номер 2 - в номер 1. Но это не работает вот так, если это список, как таблица, она должна работать, но это сетка, я не знаю, что происходит, есть ли что-то, что я пропустил?

https://stackblitz.com/edit/angular-38vdnx?file=src%2Fapp%2Fapp.component.html

1 Ответ

0 голосов
/ 14 апреля 2020

попробуйте изменить html, как показано ниже: 

<div class="col-lg-12" style="display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="row show-grid">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 stepList" *ngFor="let steps of list" cdkDropList (cdkDropListDropped)="drop($event)">
      <nb-card class="projectListItem" routerLink="/project/steps-detail" cdkDrag>
        <nb-card-header>
          <nb-icon class="projectIcon" icon="behance-outline"></nb-icon>
          <h6 style="margin-top: 10px;">{{steps.title}} {{steps.id}}</h6>
        </nb-card-header>
        <nb-card-body>
          {{steps.desc}}
        </nb-card-body>
      </nb-card>
    </div>
  </div>
</div>
...