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>