Dragable grid angular

Question

I create a grid which can be reorder using angular cdkdrag the code like this

       <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>

and the function on drop like this

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

it's not working like the way I wanted, when I move number 1 to number 4, it should make number 1 in number 4 position and number 4 slide to number 3, number 3 slide to number 2 and number 2 slide to number 1.But it doesn't work like that, If it's a list like a table it should work, but it's a grid I don't know what happens, is there something I missed?

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

Answer 1

try by changing html as below:

<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>