In Angular Material CDK Drag Drop, How to Prevent Items from Automatically Rearranging as an Element Moves?

Question

Thanks in advance. Here's the issue:

I'm using Angular Material CDK Drag Drop (version: @angular/ckd: 7.3.7)

The documentation says "Items will automatically rearrange as an element moves."

My question is: How do I prevent items from automatically rearranging as an element moves?

Here is an animated gif of what I don't want. This is a chess board I made and you can see that the "items (chess pieces) are automatically being rearranged as the element (chess piece) moves"

Here is an animated gif of what I want. What I want is for the items (chess pieces) to not be rearranged as the element (chess piece) moves.

Here is a stackblitz with the code

Answer 1

Since Angular 8, it's possible to disable this behaviour by adding cdkDropListSortingDisabled

Answer 2

just create an empy cdkDragPlaceholder, well, you need enclosed the img in a div

<div class="square"
     [ngClass]="{'white': square.row % 2 === square.col %2,
  'black': square.row % 2 !== square.col % 2}"
  cdkDropList
   ...>
  <div cdkDrag cdkDragBoundary=".board">
    <img *ngIf="square.piece"
       class="piece"
       src="{{square.piece.img()}}"
       />
       <!---this is a empty dragPlaceHolder-->
       <div *cdkDragPlaceholder></div>
   </div>
</div>