如何在Angular 7中使用拖放技术创建待办事项列表

我们可以使用angular组件开发工具包（CDK）提供的Drag-Drop模块轻松创建一个待办事项列表。

首先，通过使用以下命令创建一个angular组件–

 ng g c To-Do 

现在从@angular/cdk/drag-drop中导入CdkDragDrop, moveItemInArray, transferArrayItem到我们的to-Do组件。

编写组件视图的代码。
创建两个部门，一个是待完成的项目，另一个是已完成的项目。
这些是其中的一些参数。

1. cdkDropList。它让分部知道它是一个下降容器
2. cdkDropListData。它将数据绑定到视图上
3. cdkDropListConnectedTo。它获取当前分部所连接的另一个投放容器的ID。
4. cdkDropListDropped。拖动项目后，数据模型必须被更新。为此，我们可以监听这个事件
5. cdkDrag：它指定项目可以被拖动。

示例:

<div>
<!-- container for both list  -->
  <h1>To do</h1>
  
<!-- To-Do list  -->
  
  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListConnectedTo]="[doneList]"
    [cdkDropListData]="todo"
    (cdkDropListDropped)="drag(event)">
    <div *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>
  
<div>
  
  <h1>Done</h1>
  
<!-- Done list  -->
  
  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListConnectedTo]="[todoList]"
    [cdkDropListData]="done"
    class="example-list"
    (cdkDropListDropped)="drag(event)">
    <div *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

现在写出监听事件和添加数据的代码。
这里我们使用了一个硬编码的列表，但你总是可以通过使用ngmodel指令来获取输入。这里有
two possibilities:

1. 项目被拖到同一容器中。使用moveItemInArray来移动它在同一个容器中。
2. 项目被拖动到另一个容器。使用transferArrayItem来移动到另一个容器。

export class To-Do {
  
// hardcoded lists
  
  todo = [
    'Go to gym',
    'Eat lunch',
    'Take a nap',
    'Physics syllabus'
  ];
  
  done = [
    'Assignment',
    'Coding practice',
    'Maths syllabus',
    'English syllabus'
  ];
  
//function for listening to the event
  
  drag(event: CdkDragDrop<string[]>) {
  
//if movement if within the same container
  
    if (event.previousContainer === event.container) {
      moveItemInArray(
event.container.data, event.previousIndex, event.currentIndex);
    } 
  
//if movement if to other containers
  
    else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}

输出：成功地将 “吃午饭 “从待办事项列表拖到已办事项列表。