Как отключить сортировку в CdkDropList с помощью Angle CDK v7.0.0 +

Question

Я создаю два объекта CdkDropList, и функции перетаскивания работают нормально, моя проблема в том, что я хотел бы отключить сортировку во время перетаскивания в первом списке.Допустим, у меня есть список A и список B. Я перетаскиваю из A в B, я хотел бы отключить сортировку, пока я над списком A. Другими словами, я просто хочу использовать функцию перетаскивания, а не сортировку.,Могу ли я отключить это?

Answer 1

Теперь это реализовано в модуле перетаскивания в Angular Material 8> см. Отключенная сортировка

Answer 2

Я могу сделать это, просто добавив свойство 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 3

Супер просто ВОЗМОЖНОЕ РЕШЕНИЕ ... разделить ListA на новый список cdkDropList для каждого элемента ListA.

Список 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 4

Вы можете попытаться установить для ввода cdkDropListLockAxis значение 'x' для контейнера, который вы не хотите сортировать, в вашем случае это первый список. Это предотвратит перемещение перемещаемого элемента вверх и вниз по списку.

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

Проверьте документацию углового перетаскивания CDK