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

[ceyhunn]

I have one case, too. If folder and files in the same CdkDropList, what can I do. [cdkDropListSortingDisabled] option doesn't support this.

[DenisDremkov]

You can just set above your source list that you want to disable copy of source list without CDK drag attributes after dragStarted event, it works fine, if you think that it bad decision write - why? trigger for appear of fake block you can use - dragStarted(event: CdkDragStart) { this.isDragging = true; }

[LordMidi]

I have one case, too. If folder and files in the same CdkDropList, what can I do. [cdkDropListSortingDisabled] option doesn't support this.

Looking into the branches/tags this will be included in the release of version 8 of Angular Material. It's allready in the RCs I think. But this requires an update to Angular 8. Very sad that it hasn't been released in a v7.x version :-(

[ceyhunn]

You can just set above your source list that you want to disable copy of source list without CDK drag attributes after dragStarted event, it works fine, if you think that it bad decision write - why? trigger for appear of fake block you can use - dragStarted(event: CdkDragStart) { this.isDragging = true; }

I don't need connected lists. This is for connected lists.

[ceyhunn]

Looking into the branches/tags this will be included in the release of version 8 of Angular Material. It's allready in the RCs I think. But this requires an update to Angular 8. Very sad that it hasn't been released in a v7.x version :-(

I think, it won't be released for angular 7.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}