How to disable sort in a CdkDropList using angular cdk v7.0.0+

It's implemented now in the drag & drop module of Angular Material 8 > see Disabled sorting


I can do it simply adding a css property to the draggable div. I don't know that is the best solution, but, this work for me:

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

UPDATE 10/28/2020

Angular material implemnt this with @Input sortingDisabled -> https://material.angular.io/cdk/drag-drop/api


Super easy WORKAROUND... split up ListA into a new cdkDropList for each item of ListA.

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

List B

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