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

Question

提前致谢。这是问题：

我正在使用Angular Material CDK 拖放（版本：@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

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

您可以通过将其设置为默认零值来覆盖元素的 css 内的此内联样式规则 add !important。执行此操作时，将不会应用规则，并且行将保持原位。

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

我自己使用了这个技巧并且它有效。我试图让它在你的 Stackblitz 中工作，但是代码太多，并且需要花费太多时间来弄清楚它的确切放置位置。如果需要，您应该提供“最小的工作示例”而不是整个应用程序。

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

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