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?

[drag & drop docs](https://material.angular.io/cdk/drag-drop/examples) - `Drag&Drop enter predicate` — Carsten, Mar 16 '20 at 12:21
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, Mar 16 '20 at 12:31
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, Mar 16 '20 at 13:09

zerocewl · Accepted Answer · 2020-03-16T14:01:21.073

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

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 — Timuçin Çiçek, Mar 16 '20 at 13:18
The rule that I explained should be applied to all lists not just one — Timuçin Çiçek, Mar 16 '20 at 13:28

score 0 · Answer 2 · answered Dec 11 '20 at 23:57

0

You can use cdkDragDisabled with cdkDrag element.

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

answered Dec 11 '20 at 23:57

Khaled Lela

7,831
6
45
73

2

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. – Sygmoral Mar 10 '21 at 09:59
This is what I was looking for... `[cdkDrop]="condition ? null : true"` is not working. However `cdkDragDisabled` does – efirat Apr 05 '21 at 18:57

How to disable CDK Drop due to condition

2 Answers2