How drap / drop an item in Grid layout (use cdk ) in angular-CodePudding

I built an item drag/drop functionality in a grid layout in angular (cdk used). Currently I just drag/drop and change the position between those items, can't drag and drop to a position without the item (It won't find the dropIndex so it can't drop it to a position without the item). Can anyone help me find a solution that can drag/drop anywhere in the grid?

DEMO: https://stackblitz.com/edit/angular-cdk-drag-drop-sortable-flex-wrap-v2-hz5ke7?file=src/app/app.component.ts

CodePudding user response：

So you need your items to be moved in to empty slots right. Can you check following modification I did.

What I did was adding visibility: hidden property for defining empty slots. This way we will still have a empty item slot to drag and drop with a dropIndex.

  <div
    cdkDropList
    *ngFor="let item of items"
    [cdkDropListEnterPredicate]="dropListEnterPredicate"
    (cdkDropListDropped)="dropListDropped($event)"
  >
    <!-- <div cdkDrag  (cdkDragMoved)="dragMoved($event)">
      {{ item }}
    </div> -->
    <div 
      cdkDrag
       
      [ngClass]="emptyItems.includes(item)? 'empty-slot' : ''"
      (cdkDragMoved)="dragMoved($event)">
    {{ item }}
    </div>
  </div>

Checkout the complete stackblitz

Note it is a two column grid. Hope you can follow similar approach to make your grid work.