[drag-drop] Allow to disable sorting within a CdkDropList

Please describe the feature you would like to request.

I want to be able to disable sorting within a CdkDropList. That is, I want to be able to drag items from a CdkDropList to it’s connected CdkDropList, while not allowing items within the source CdkDropList to be swapped (sorted).

I guess it would be used as an input of CdkDropList, something like this: @Input('cdkDropListSortable') sortable: boolean, that when true will disable sorting within the drop list.

Also, if there’s a way to achieve this behavior using the current API, I would love to hear about that. Searching online I found a few people asking the same question (https://stackoverflow.com/questions/53380336/how-to-disable-sort-in-a-cdkdroplist-using-angular-cdk-v7-0-0), but none received a relevant answer.

Thanks!

[frankvdb7]

I too want to just disable the sorting and only allow dragging between lists and on items. An usecase I’m working on is for example an already sorted file/folder list. I want to be able to drag and drop files on folders, not order them.

[creadicted]

Hello @crisbeto thank you for your reply. Bit this would disable the dragging completely. I think @yarinr has the same issue I have. I want to drag something out of a list. And I use a clone method to do that. What I do not want is that, while I drag my object over the other list items, those will also be sorted. Does this make sense?

I tried cdkDropListDisabled but this seems not to work when you are starting in the cdkDropList

<ul
    id="container_list"
    cdkDropList
    [cdkDropListConnectedTo]="['#dropbucket']"
    [cdkDropListDisabled]="isDragging">

    <li
    cdkDrag
    (cdkDragStarted)="dragStarted($event)"
    (cdkDragEnded)="dragEnded($event)"
    *ngFor="let draggable of draggables"
    >
    test</li>

</ul>

 dragStarted(event: CdkDragStart) {
    this.isDragging = true;
  }

  dragEnded(event: CdkDragEnd) {
    this.isDragging = false;
  }

PS: This is also part of the #13100 issue discussion