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

[yarinr]

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!

[crisbeto]

This sounds very close to the cdkDropListDisabled input. Does it do what you need?

[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

[yarinr]

@creadicted Yes, that's exactly what I mean.
@crisbeto See the reply by @creadicted - cdkDropListDisabled does not achieve the behavior I'm talking about.

Thank you both for your input!

[creadicted]

I saw request in multiple locations. In the past I played around with other d&d components. Like https://github.com/bevacqua/dragula . They expose a function that allows to manipulate what to do when hovering over a 'bucket'. So you could intercept the sorting behavior. A simple option would be easier.

For a quick you can just have an cdkDropList around each cdkDrag object. But that is definitely not a nice solution.

[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.

[maknapp]

This issue is similar to #13906

[MrDywar]

I saw request in multiple locations. In the past I played around with other d&d components. Like https://github.com/bevacqua/dragula . They expose a function that allows to manipulate what to do when hovering over a 'bucket'. So you could intercept the sorting behavior. A simple option would be easier.

For a quick you can just have an cdkDropList around each cdkDrag object. But that is definitely not a nice solution.

Alternatively you can just override css transform on you cdkDrag, by setting it to transform: none !important. The cdkDropList still changes transform, but it has no effects.

May be it will break some animations, but drop event works perfectrly with current and previouse indexes.

[LordMidi]

I'm also needing this feature as I have a (huge) static list which should not be sorted but provides items to be dropped into another list (which can be sorted).