0

我想创建一个看板，每个成员都有一个任务，任务可以有一个状态=“Todo”，“In Progress”和“Done”。我只能水平拖放，但不能垂直拖放。如何使拖放垂直工作？

<div class="container-wrapper" *ngFor="let member of projectMembers; let memberIndex = index">

    <div class="container">
        <h2>Backlog</h2>
  
        <mat-card cdkDropList id="Backlog" #backlogList="cdkDropList" [cdkDropListData]="backlog"
          [cdkDropListConnectedTo]="[doneList, inProgressList, todoList]" (cdkDropListDropped)="drop($event, memberIndex)" class="list">
          <p class="empty-label" *ngIf="(backlog)?.length === 0">Empty list</p>
          <div (mousedown)="setSelectedStoryboardElement(userstory)"  *ngFor="let userstory of backlog" cdkDrag >
              <p>{{userstory.description}}</p>
            </div>
        </mat-card>
      </div>
    <div class="container">
      <h2>Todo</h2>

      <mat-card cdkDropList id="Todo" #todoList="cdkDropList" [cdkDropListData]="todo"
        [cdkDropListConnectedTo]="[doneList, inProgressList, backlogList]" (cdkDropListDropped)="drop($event, memberIndex)" class="list">
        <p class="empty-label" *ngIf="(todo)?.length === 0">Empty list</p>
        <div (mousedown)="setSelectedStoryboardElement(userstory)"  *ngFor="let userstory of todo" cdkDrag >
            <p *ngIf="userstory.owner == projectMemberIds[memberIndex]">{{userstory.description}}</p>
          </div>
      </mat-card>
    </div>

    <div class="container">
      <h2>In progress</h2>

      <mat-card cdkDropList id="In progress" #inProgressList="cdkDropList" [cdkDropListData]="in_progress"
        [cdkDropListConnectedTo]="[todoList, doneList, backlogList]" (cdkDropListDropped)="drop($event, memberIndex)" class="list">
        <p class="empty-label" *ngIf="(in_progress)?.length === 0">Empty list</p>
        <div (mousedown)="setSelectedStoryboardElement(userstory)" *ngFor="let userstory of in_progress" cdkDrag >
            <p *ngIf="userstory.owner == projectMemberIds[memberIndex]">{{userstory.description}}</p>
          </div>
      </mat-card>
    </div>

    <div class="container">
      <h2>Done</h2>

      <mat-card cdkDropList id="Done" #doneList="cdkDropList" [cdkDropListData]="done"
        [cdkDropListConnectedTo]="[todoList, inProgressList, backlogList]" (cdkDropListDropped)="drop($event, memberIndex)" class="list">
        <p class="empty-label" *ngIf="(done)?.length === 0">Empty list</p>
        <div (mousedown)="setSelectedStoryboardElement(userstory)"  *ngFor="let userstory of done" cdkDrag>
            <p *ngIf="userstory.owner == projectMemberIds[memberIndex]">{{userstory.description}}</p>
          </div>
      </mat-card>
    </div>
</div>

结果： 图像

4

0 回答 0