Not able to disable Drop While using CDK Drag and Drop for Angular

Question

I'm using Angular version 15, with material UI version 14

For drag and drop I am using material drag and drop https://material.angular.io/cdk/drag-drop/overview

I have a table of 3 columns, and I want the functionality, that when I start dragging from 1, I should only be able to drop it in column 2. The drop functionality for column 3 should be disabled. When I drag from column 2, it should only go to column 3, and column 1 should be disabled. And for column 3, Drag functionality should be disabled.

I've tried to use the attribute cdkDropListDisabled to disable a column, but it is disabling the whole list, and I can still drop objects from other columns to the disabled column. I'm not able to drag the objects of the disabled column.

Answer 1

You can use the cdkDropListEnterPredicate for that.

Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container.

You can define a predicate function in your component that checks if the previous column is allowed for the element to enter the new column.