仅在特定类别上进行 cdk 拖放

Question

所以假设我有两组待办事项和已完成。

待办组中有多个类别，然后在其中有待办事项。

类别 1 中的一项已完成，剩下的就是待办事项。

在这种情况下，同一类别中移动到完成的项目类别为 1。这意味着类别 1 用于完成和待办事项。这样用户只能转移属于该类别的项目

我有一个 stackblitz 让你理解它。

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

简单来说，我想拖放（如果你在我的 stackblitz 上，去那里看看）子项目 2 在下面的容器中，子项目 4、5、6

Answer 1

您不能连接 cdkDropList。要选择 dropList，请在每次拖动时使用 [cdkData] 和 [cdkDropListEnterPredicate]。例如您可以使用 "item.name" 作为 cdkData，并在谓词中比较值

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

见your forked stackblitz 注意：您需要将 "children" 添加到 test3，否则您不能在此列表中删除任何内容

仅在特定类别上进行 cdk 拖放

cdk drag drop on specific category only

angular

angular-cdk