angular - 在 Angular Material CDK Drag Drop 中，如何防止项目随着元素移动而自动重新排列？

Question

提前致谢。这是问题:

我正在使用 Angular Material CDK Drag Drop (版本:@angular/ckd:7.3.7)

文档说“当元素移动时，项目将自动重新排列。”

我的问题是:如何防止项目在元素移动时自动重新排列？

Here is an animated gif of what I don't want .这是我制作的棋盘，您可以看到“项目(棋子)随着元素(棋子)移动而自动重新排列”

Here is an animated gif of what I want .我想要的是元素(棋子)不会随着元素(棋子)移动而重新排列。

Here is a stackblitz with the code

Answer 1

只需创建一个空的 cdkDragPlaceholder，好吧，您需要将图像包含在一个 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>