在 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 中工作，但是代码太多，需要太多时间才能弄清楚到底把它放在哪里。 如果需要，您应该提供一个“最小工作示例”而不是整个应用程序。