自动在容器之间拖动项目

时间:2019-01-08 11:27:01

标签: angular

我需要使用Angular和Google Anular Material库编写一个简单的任务板,它将每秒将项目从一个列表移到另一个列表。逐一。 我知道如何由用户实现手动拖放,但是可以使用Angular Material自动执行相同的操作吗?

我有一个简单的任务板,其中包含三个代表任务列表的容器。我可以手动拖动它们。

我想让页面自动每秒一次从列表中拖放项目。我创建了一个教育模拟,并想演示任务板在一段时间内的工作方式

这是单个任务清单的摘录:

<div
      cdkDropList
      #analizeList="cdkDropList"
      [cdkDropListData]="Taskboard"
      [cdkDropListConnectedTo]="[inprogressList]"
      class="example-list"
      (cdkDropListDropped)="drop($event, 1)">
      <div *ngFor="let item of Taskboard | callback: 'phase': 1" cdkDrag>
        {{item.name}}: {{item.plannedeffort}}h
        <mat-progress-bar
        class="progressbar"
        [color]="primary"
        [mode]="determinate"
        [value]="item.accomplishedeffort*100/item.plannedeffort"
        [bufferValue]="50">
        </mat-progress-bar> 
        {{item.value}}$
      </div>
    </div>

我有3个这样的列表,分别称为Analizelist,Inprogresslist和Testlist。

方法drop()的定义方式如下:

  drop(event: CdkDragDrop<string[]>, i: number) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      if (i==1) { 
        this.startTask(event.previousIndex, i); 
      } else { 
        let nr = this.getTaskbyIndex(event.previousIndex,i);
        if (i<=3) {
          this.startTask(nr, i); 
        } else {
          this.finishTask(nr);
        }
      }
    }
  }

0 个答案:

没有答案