cdk drag drop on specific category only

Question

So suppose i have two group todo and done.

In todo group there is multiple category and then inside it todo's items.

one item from category 1 is done rest is there for todo.

that item moved to done on same category in this case category is 1. it means category 1 is there for both done and todo. so that user can only transfer items which belongs to that category only

i have a stackblitz to let u understand it.

https://stackblitz.com/edit/angular-dragdrop-from-parent-to-nested-childlist-ypfk2n?file=app/cdk-drag-drop-connected-sorting-example.ts

in simple words i want to drag and drop (if you are on my stackblitz go and see there) subitem-2 in the below containers with subitem 4,5,6

Answer 1

you can not concatenate cdkDropList. For choose dropList use [cdkData] in each drag and [cdkDropListEnterPredicate]. e.g. you can use the "item.name" as cdkData, and in predicate compare the values

<div cdkDropListGroup>
  <ul>
    <li *ngFor="let item of parent" cdkDrag >{{item.name}}
      <ul #childList="cdkDropList" *ngIf="item.children" [cdkDropListData]="item.children"
      cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListEnterPredicate]="evenPredicate(item.name)">
        <li *ngFor="let subItem of item.children" cdkDrag [cdkDragData]="item.name">
          {{subItem.name}}
        </li>
      </ul>
    </li>
  </ul>
</div>

evenPredicate(name:string){
  return (item: CdkDrag<any>)=>{
     return name==item.data
  }
}

See your forked stackblitz NOTE: You need add "children" to test3, else you can not drop anything in this list