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

Question

I'm creating two CdkDropList objects and the dragging and dropping functionalities are working fine, my problem is that I would like to disable the sorting while I'm dragging in the first list. Let's say I have List A and List B. I'm dragging from A to B, I would like to disable the sorting while I'm over List A. In other words, I just want the drag n drop functionality, not the sorting. Can I disable that?

Limy

can you clarify your question please ! – Mildred

Usually when you are dragging the element is changing position in the list, is changing the index on the "parent" list. I want to be able to drag from one list to the other but without sorting the elements, I don't know how to explain that better – Limy

@LeslieMorejon did you ever find out how to do this? – Outpatient

No @d.moncada, I haven't found a way – Limy

I have currently the same problem :( – Chlortetracycline

@LeslieMorejon I am having the same issue. Do you have any updates on this? – Confessor

Answer 1

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

Scheme

Answer 2

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

Faustino

Answer 3

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>

Welby

Answer 4

I have used the following code to stop sorting

<div *ngFor="let item of items;">        
      <div style="position: absolute; width:100%;height: 100%" cdkDrag>
        <p *cdkDragPreview>{{item}}</p>
      </div>
      <p>{{item}}
      </p>
</div>

Hope this helps

Teutonism

Answer 5

As some other answers mention, you can now apply the [cdkDropListSortingDisabled] property on the CdkDropList element to disable sorting within the list. Here's an example of what it would look like:

<div cdkDropList cdkDropListSortingDisabled="true">

Siliceous

Answer 6

You could try setting the cdkDropListLockAxis input to 'x' on the container you don't want to sort, in your case the first list. This will prevent the draggable item from moving up and down the list.

<div cdkDropList [cdkDropListLockAxis]="'x'">
    <div *ngFor="let item of items" cdkDrag>
        <span>{{item.label}}</span>
    </div>
</div>

Check the Angular CDK Drag and Drop documentation

Ripe

I think that's not a "solution" – Scheme

This still starts to flicker in the origin list sometimes – Radiolarian