How to disable CDK Drop due to condition

Question

I'm trying to find a way how to disable dropping by using CDK due to some conditions.If the list which I wanna drop is empty should be disabled.I couldn't find a way to do that inside a method in .ts file.There are some HTML directives for that but not useful for me.

if(event.container.data.length==1){
  event.previousContainer.disabled=true;
}

I found this .disabled method for dragged containers but it only works when I Drag.I need an event to drop.

https://stackblitz.com/edit/angular-ui7u9m?file=src/app/cdk-drag-drop-disabled-sorting-example.ts

In this stackblitz example,there are two lists for example when Avilable lists is empty(no elements in array),dropping shouldnt be allowed anymore to this list.Could you help me to do that?

I've checked this already but seems like it only checks number is even or not.I should check container's length is empty or not — Timuçin Çiçek
I would be glad if you could come up with solution based on my stackblitz.I tried some methods due to that docs stackblitz but couldnt get the result that I wanted — Timuçin Çiçek

zerocewl zerocewl · Accepted Answer · 2020-03-16T13:12:55

You can use the Angular Material enterPredicate from CdkDropList (Docs)

@Input('cdkDropListEnterPredicate')

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.

E.g.:

html:

<div
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListEnterPredicate]="canDrop">
      <div class="example-box" *ngFor="let item of basket" cdkDrag>{{item}}</div>
    </div>

component:

  canDrop() {
    return this.basket && this.basket.length > 0;
  }

Check attached Stackblitz.

Edit 1:

Additional you can use the attached list where your dropped too:

  canDrop(item: CdkDrag, list: CdkDropList) {    
    console.log(list.getSortedItems().length)
    return list && list.getSortedItems().length && list.getSortedItems().length > 0;
  }

Edit 2:

You can overwrite the function to pass in a parameter:

...
[cdkDropListEnterPredicate]="dropListEnterPredicate(basket)">
...

  dropListEnterPredicate(list: []){
    return function(drag: CdkDrag, drop: CdkDropList) {
        return list.length > 0;
    };

How to disable CDK Drop due to condition

2 Answers