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

Question

提前致谢。这是问题：

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

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

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

这是我不想要的动画 gif。这是我制作的棋盘，您可以看到“随着元素（棋子）移动，项目（棋子）正在自动重新排列”

这是我想要的动画 gif。我想要的是物品（棋子）不会随着元素（棋子）移动而重新排列。

Answer 1

所以：

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

应确保对象不会虚拟插入到 DOM 中，从而限制这种行为。

我认为它不适用于动态列表，但显然 .cdk-drag-placeholder { display:none; 确实有效。

如果它不起作用，则意味着您正在尝试在组件上应用样式，并且这些样式已封装在组件内以避免样式泄漏。新添加的 DOM 元素不会“看到”应用的样式。解决方案是放置 ViewEncapsulation.None 以便允许样式从组件中泄漏并将 css 规则调整为如下所示：

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

因此，要确保它不会阻碍组件外部的样式。