我们可以使用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}}
      
   
     
 
    

现在，编写用于侦听事件和添加数据的代码。

有两种可能性：

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

最终输出效果如下：

我们成功的将“Eat lunch”从“To do”列表拖到“Done”列表。

本文完~