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

我们可以使用angular Component Development Kit(CDK)提供的Drag-Drop模块轻松创建待办事项列表。

首先，使用以下命令创建角度分量：

ng g c To-Do 

现在，从@ angular / cdk / drag-drop导入CdkDragDrop，moveItemInArray，transferArrayItem到我们的待办事项组件，

编写组件视图的代码：
创建两个分区，一个用于待完成的项目，另一个用于已完成的项目。
这些是一些参数：

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

例子：

  
To do
  

  
  

    
{{item}}
  

  

  
  
Done
  

  
  

    
{{item}}
  

现在，编写用于侦听事件和添加数据的代码。
在这里，我们使用了一个硬编码的列表，但是您始终可以使用ngmodel指令进行输入。有
两种可能性：

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) {
  
//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);
    }
  }
}

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