如何使用角度 cdk v7.0.0+ 在 CdkDropList 中禁用排序答案

【问题标题】：How to disable sort in a CdkDropList using angular cdk v7.0.0+如何使用角度 cdk v7.0.0+ 在 CdkDropList 中禁用排序
【发布时间】：2019-04-22 03:35:21
【问题描述】：

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

【问题讨论】：

你能澄清你的问题吗！
通常当你拖动元素时，改变列表中的位置，改变“父”列表中的索引。我希望能够从一个列表拖到另一个列表，但不对元素进行排序，我不知道如何更好地解释这一点
@LeslieMorejon 你知道怎么做吗？
没有@d.moncada，我还没找到办法
我目前有同样的问题:(

标签： angular typescript drag-and-drop angular-cdk

【解决方案1】：

它现在在 Angular Material 8 的拖放模块中实现 > 参见 Disabled sorting

【讨论】：

【解决方案2】：

我可以简单地向可拖动的 div 添加一个 css 属性。我不知道这是最好的解决方案，但是，这对我有用：

html:

<div cdkDropList>
    <div class="item-draggable" *ngFor="let item of items" cdkDrag>
        <span>{{item.label}}</span>
    </div>
</div>

css:

.item-draggable {
  transform: none !important;
}

2020 年 10 月 28 日更新

Angular 材质使用@Input sortDisabled 实现这一点 -> https://material.angular.io/cdk/drag-drop/api

【讨论】：

【解决方案3】：

超级简单解决方法...将 ListA 拆分为 ListA 的每个项目的新 cdkDropList。

列表 A

<div class="list-A-wrapper">
    <ng-container  *ngFor="let item of listA">
      <div  cdkDropList
            [cdkDropListConnectedTo]="['id_listB']"
            [cdkDropListData]="[item]">

            <div cdkDrag>{{item.label}}</div>

      </div>
    </ng-container>
</div>

列表 B

<div  cdkDropList
      [cdkDropListData]="listB"
      (cdkDropListDropped)="OnDrop($event)"
      id="id_listB">
  <div  *ngFor="let item of listB"
        cdkDrag>{{item.label}}</div>
</div>

【讨论】：

【解决方案4】：

我已使用以下代码停止排序

<div *ngFor="let item of items;">        
      <div style="position: absolute; width:100%;height: 100%" cdkDrag>
        <p *cdkDragPreview>{{item}}</p>
      </div>
      <p>{{item}}
      </p>
</div>

希望对你有帮助

【讨论】：

【解决方案5】：

正如其他一些答案所提到的，您现在可以在 CdkDropList 元素上应用 [cdkDropListSortingDisabled] 属性来禁用列表中的排序。以下是它的外观示例：

<div cdkDropList cdkDropListSortingDisabled="true">

【讨论】：

【解决方案6】：

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

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

Check the Angular CDK Drag and Drop documentation

【讨论】：

我认为这不是一个“解决方案”
这个有时还是会在源列表中开始闪烁