Question

我希望能够通过拖放来使用户从待办事项列表的左侧拖入。我使用了单个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>

这一切都很好，但是如果我要说拖动最后一个LI，然后将其从第一个LI下从左侧向内移动，则它成为子任务，有点像ToDoist或Asana这样的项目管理软件的工作方式它，我不知道该怎么做。

我尝试通过在每个LI内嵌套一个UL作为另一个下拉列表，然后使用connect to参数，但这没有用，更不用说我只能上下拖动，而不能左右移动。

如果该库不适合，有人可以推荐一个这样做的库吗？我确信有人已经想通了。

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

0 个答案: