如何使用 angular cdk v7.0.0+ 在 CdkDropList 中禁用排序

Question

我正在创建两个 CdkDropList 对象并且拖放功能工作正常，我的问题是我想在拖入第一个列表时禁用排序。假设我有列表 A 和列表 B。我从 A 拖到 B，我想在列表 A 上禁用排序。换句话说，我只想要拖放功能，而不是排序. 我可以禁用它吗？

Answer 1

它现在已在 Angular Material 8 的拖放模块中实现 > 请参阅禁用排序

Answer 2

您可以尝试将cdkDropListLockAxis输入设置为'x'您不想排序的容器，在您的情况下为第一个列表。这将防止可拖动项目在列表中上下移动。

<div cdkDropList [cdkDropListLockAxis]="'x'">
    <div *ngFor="let item of items" cdkDrag>
        <span>{{item.label}}</span>
    </div>
</div>

检查 Angular CDK 拖放文档