Angular 如何使用角度CDK拖放创建子拖动列表

我希望能够有一个用户从左边拖动到一个待办事项列表中，使用角度材质拖放。我使用的是UL LI元素的单一列表，我可以上下拖动它们来排序，但我不知道如何在每个LI下创建子列表：

<ul class="list-unstyled to-do pt-20" style="padding-left: 35px;" cdkDropList (cdkDropListDropped)="droppedRow($event)" [cdkDropListData]="taskList.tasks">
        <li class="task-list-item" *ngFor="let task of taskList.tasks" cdkDrag>
          <div *ngIf="!task.deleted">
            <div class="drag-handler" cdkDragHandle></div>
            <div class="remember-checkbox" style="display: inline-block;">
              <input type="checkbox" (click)="markTaskComplete(task,$event)" class="form-control {{getTaskProgress(task) == 'In Progress' ? 'in-progress' : ''}}" id="task-{{task.id}}" [checked]="getTaskProgress(task) == 'Complete' || getTaskProgress(task) == 'In Progress'">
              <label id="label-for-{{task.id}}" for="task-{{task.id}}" class="{{getTaskProgress(task) == 'In Progress' ? 'in-progress' : ''}}">&nbsp;</label>
            </div>
            <a href="javascript:void(0)" title="View Task Details" class="task-label mr-10" (click)="viewSingleTask(task)">{{task.title}}</a>
            <span class="badge badge-danger mr-10" *ngIf="task.priority == 'High'">High</span><span class="badge badge-warning mr-10" *ngIf="task.priority == 'Medium'">Medium</span><span class="badge badge-success mr-10" *ngIf="task.priority == 'Low'">Low</span>
            <span class="badge badge-warning mr-10" *ngIf="task.progressStarted && getTaskProgress(task) != 'Complete'">In Progress</span><span class="badge badge-secondary mr-10" *ngIf="!task.progressStarted">Not Started</span><span class="badge badge-success mr-10" *ngIf="getTaskProgress(task) == 'Complete'">Complete</span>
            <span class="badge badge-secondary mr-10" *ngIf="task.assignedTo">{{task.assignedTo.displayName}}</span><span class="badge badge-secondary mr-10" *ngIf="!task.assignedTo">Unassigned</span>
            <span class="badge badge-secondary mr-10" *ngIf="task.startDate">Start {{task.startDate | date: 'mediumDate'}}</span>
            <span class="badge badge-secondary mr-10" *ngIf="task.dueDate">Due <span class="{{task.overdue ? 'overdue text-danger' : ''}}">{{task.dueDate | date: 'mediumDate'}}</span></span>
            <span class="text-secondary mr-10"><a href="javascript:void(0)" (click)="taskCommentsModal(task)"><i class="fa fa-comment"></i></a> {{task.comments ? task.comments.length : '0'}}</span>
            <span class="text-secondary mr-10"><a href="javascript:void(0)" (click)="taskFilesModal(task)"><i class="fa fa-folder-open"></i></a> {{task.taskFiles ? task.taskFiles.length : '0'}}</span>
            <span class="text-secondary mr-10"><i class="fa fa-money"></i> 0</span>
            <a href="javascript:void(0)" class="text-danger pull-right" (click)="deleteTask(task)" *ngIf="auth.hasRole('ROLE_ADMIN')"><i class="fa fa-trash"></i></a>
            <div class="clearfix"></div>
          </div>

        </li>
      </ul>

高-中-低
进行中未开始完成
{{task.assignedTo.displayName}}未分配
开始{task.startDate |日期：'mediumDate'}
到期日{task.dueDate | date:'mediumDate'}
{{task.comments？task.comments.length:'0'}
{{task.taskFiles？task.taskFiles.length:'0'}
0

这一切都很好，但如果我想说拖动最后一个LI，然后从第一个LI下的左侧向内移动它，使其成为一个子任务，有点像ToDoist或Asana这样的项目管理软件，我不知道该如何做

我试着在每个LI中放置一个嵌套的UL作为另一个下拉列表，然后使用connected to参数，但这不起作用，更不用说我只能上下拖动，不能左右拖动

如果这个图书馆不合适，有人能推荐一个这样做的图书馆吗？我相信有人已经想出了一个办法