在 Angular Material CDK Drag Drop 中，如何防止項目隨着元素移動而自動重新排列？

Question

提前致謝。 這是問題：

我正在使用Angular Material CDK Drag Drop （版本：@angular/ckd：7.3.7）

文檔說“當元素移動時，項目會自動重新排列。 ”

我的問題是：如何防止項目在元素移動時自動重新排列？

這是我不想要的動畫 gif 。 這是我制作的棋盤，您可以看到“項目（棋子）隨着元素（棋子）移動而自動重新排列”

這是我想要的動畫 gif 。 我想要的是物品（棋子）不會隨着元素（棋子）移動而重新排列。

這是一個帶有代碼的stackblitz

Answer 1

只需創建一個 empy cdkDragPlaceholder，好吧，您需要將 img 包含在 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>

Answer 2

所以：

.cdk-drag-placeholder { display:none; } 

應該確保對象不會被虛擬插入到限制這種行為的 DOM 中。

我認為它不適用於動態列表，但顯然 .cdk-drag-placeholder { display:none; 確實有效。

如果它不起作用，則意味着您正在嘗試在組件上應用樣式，並且這些樣式已封裝在組件中以避免樣式泄漏。 新添加的 DOM 元素不會“看到”應用的樣式。 一個解決方案是放置 ViewEncapsulation.None 以便允許樣式從組件中泄漏並將 css 規則調整為類似的內容：

#my-special-list {
    & > .cdk-drag-placeholder {
        display: none !important;
    }
}

所以要確保它不會阻礙組件外部的樣式。

Answer 3

從 Angular 8 開始，可以通過添加cdkDropListSortingDisabled來禁用此行為

Answer 4

項目的移動是通過向元素添加內聯樣式來完成的transform: translate3d(Xpx, Ypx, Zpx); 規則。

您可以通過將元素設置為默認零值 add !important來覆蓋元素的 css 中的此內聯樣式規則。 執行此操作時，不會應用規則，行將保持原位。

/* This prevents cdk drag sorting from shuffling things around */
.piece {
  transform: translate3d(0px, 0px, 0px) !important;
}

我自己使用了這個技巧並且它有效。 我試圖讓它在你的 Stackblitz 中工作，但是代碼太多，需要太多時間才能弄清楚到底把它放在哪里。 如果需要，您應該提供一個“最小工作示例”而不是整個應用程序。