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?

Sleigh

drag & drop docs - Drag&Drop enter predicate – Premium

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 – Rendarender

Are you being serious right now..? – Premium

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 – Rendarender

Answer 1

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

Logy

This is the solution Im looking for.But here problem is I should be able to send array to method canDrop() .Because in my real example I have 4-5 lists so to check which is empty or not,I should send the specific array to this method canDrop().I tried but seems like this method doesn't accept parameter from html – Rendarender

The rule that I explained should be applied to all lists not just one – Rendarender

Just use the list you dropped to, see updated stackblitz – Logy

Answer 2

You can use cdkDragDisabled with cdkDrag element.

<div *ngFor="let item of items" cdkDrag [cdkDragDisabled]="canDrag">...</div>

Deuteragonist

This will prevent dragging that specific item. But this question is not about the item being dragged: it's about the list being dropped into. – Sat

This is what I was looking for... [cdkDrop]="condition ? null : true" is not working. However cdkDragDisabled does – Audiometer