在角度材质 CDK 拖放中，如何防止项目在元素移动时自动重新排列

Question

提前感谢。问题是：

我正在使用角度材料CDK拖放(版本：@angular/ckd：7.3.7(

文档说"项目将随着元素的移动而自动重新排列。

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

这是我不想要的动画 gif。这是我制作的棋盘，您可以看到"随着元素(棋子(的移动，物品(棋子(会自动重新排列">

这是我想要的动画 gif。我想要的是项目(棋子(不会随着元素(棋子(的移动而重新排列。

这是带有代码的堆栈闪电战

Answer 1

从 Angular 8 开始，可以通过添加 cdkDropListSortingDisabled 来禁用此行为

Answer 2

只需创建一个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 3

所以：

.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 4

项目的移动是通过使用transform: translate3d(Xpx, Ypx, Zpx);规则向元素添加内联样式来完成的。

您可以在 css 中为元素覆盖此内联样式规则，方法是将其设置为默认的零值添加!important 。执行此操作时，将不会应用规则，并且行将保留在原位。

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

我自己用了这个技巧，它有效。我试图让它在你的 Stackblitz 中工作，但是代码太多了，需要太多时间来弄清楚它到底放在哪里。如果你想要这个，你应该提供一个"最小的工作示例">，而不是一个完整的应用程序。

Answer 5

看起来我发现了可能对你有帮助的东西。

将自定义 0px 高度占位符添加到 cdkDrag 元素。这里： 图片

请看下面的例子：

<div cdkDrag cdkDragBoundary=".board">
    <img *ngIf="square.piece" class="piece" src="{{ square.piece.img() }}" />
    <div *cdkDragPlaceholder style="height: 0px"></div>
  </div>

参考： https://stackoverflow.com/a/68121291