Issue in angular cdk nested drag and drop

45 views Asked by At

CDK Version: 14.2.7

We have two drag and drop containers We have have array structure like below for one drag and drop main page container pages: [{ sections: [{ rows: [{ columns: [{ }] }] }] }];

We have another drag and drop container which is for column fields

How our drag and drop should work?

  • User can drag any control from column fields container and drop to main page container and make it row of section or column of any row
  • User can also drag items within main page container. Here user can also drag and drop section, row and columns. User can also drag any column and can make it into row.
  • For section and rows we have vertical orientation and for column we have horizontal orientation for drag and drop.

We are facing issue like when we start drag control from column fields to main page container. It is not creating column for first row instead of that it creating it as row only. We can create column to row. But when we try to pick row content and make it column it is not working consistently. It is not creating placeholder for control when we go top to bottom of page. But when we start from bottom to top of page then it starts creating columns.

CDK sometime works and sometimes not.

Please help here.

Thank you.

We have used cdkDropListEnterPredicate, cdkDropListConnectedTo properly.

0

There are 0 answers