0

我创建了一个可以使用角度 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

4

1 回答 1

0

尝试通过更改 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>

于 2020-04-14T05:14:08.957 回答