Question

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

Answer 1

超级容易 WORKAROUND ......为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>

Answer 2

您可以尝试将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

Answer 3

我可以简单地将CSS属性添加到可拖动的div中来实现。我不知道这是最好的解决方案，但是，这对我有用：

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;
}

Answer 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>

希望这会有所帮助

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

4 个答案: