Angular Material列表拖拽及内层列表项直接排序问题求助

完全可以实现，问题根因为现有示例的内层cdkDropList仅配置了跨列表连通能力，没有绑定自身内部排序的处理逻辑，按以下步骤修改即可：

• 第一步：给每个内层cdkDropList绑定唯一ID、自身数据源以及专属的drop事件
  内层拖拽容器需要关联当前子分组的数据作为输入，同时保留和外层、其他内层列表的连通性，参考HTML代码如下：

  <div
    cdkDropList
    [id]="'sub-group-' + group.id"
    [cdkDropListData]="group.items"
    [cdkDropListConnectedTo]="['parent-list', ...allSubGroupIds]"
    (cdkDropListDropped)="handleSubGroupDrop($event, group)"
  >
    <div cdkDrag *ngFor="let item of group.items" [cdkDragData]="item">
      {{ item.content }}
    </div>
  </div>
  

• 第二步：实现内层列表的drop事件处理逻辑，区分内部排序和跨列表移动两种场景
  引入CDK自带的数组操作工具函数即可完成逻辑，参考TS代码如下：

  import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
  
  handleSubGroupDrop(event: CdkDragDrop<any[]>, currentGroup: any) {
    // 同一个内层列表内部拖拽，直接排序
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      // 跨列表（外层到内层/内层到其他内层）移动数据
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
  

• 第三步：维护全局的内层列表ID集合allSubGroupIds，确保所有拖拽容器的连通性配置正确，不会出现跨列表拖拽失效的问题。

注意事项：所有cdkDropList的ID必须全局唯一，内层和外层的drop处理逻辑要拆分避免冲突，拖拽项要绑定cdkDragData确保数据操作准确。

内容的提问来源于stack exchange，提问作者Nikhil E V