[Fixed] How to disable CDK Drop due to condition

Issue

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?

Solution

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;
    };