Angular7拖放Drag Drop示例详解

Angular 7 CDK 拖放功能实现详解

Angular 7 CDK 新增的拖放模块让列表元素的拖动操作变得非常直接。下面通过一个完整示例拆解整个实现过程。第一步：安装依赖包。

npm install @angular/cdk --sa ve

将拖放模块导入 app.module.ts

安装完成后，按照常规操作，将 DragDropModule 引入 app.module.ts 的 imports 数组。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

注意，DragDropModule 来自 @angular/cdk/drag-drop，且已正确放置于 imports 数组中。

配置 myservice.service.ts 数据源

接下来准备拖放操作所需的数据。此处使用一个现成的服务，从 JSONPlaceholder 获取用户数据。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata=[];
   private apiurl="http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

在 app.component.ts 中调用服务并获取数据

然后在组件内注入该服务，将返回的数据存储到 personaldetails 变量中。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title='Angular 7 Project!';
   public personaldetails=[];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails=Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

现在数据已就绪，先简单在模板中展示列表。

Angular 7 - Drag and Drop Module

   
.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}
浏览器中的显示效果：

在 app.component.html 中添加 CDK 拖放属性
仅有静态列表还不够，需添加 CDK 的拖放指令才能实现交互。修改模板如下：
Angular 7 - Drag and Drop Module

   

      {{item.name}}
     

关键属性说明：cdkDropList 定义可放置区域，cdkDropListData 绑定数据源，cdkDrag 使每个元素可拖拽，cdkDropListDropped 监听放下事件。此时在浏览器中测试——拖动确实生效，但松开鼠标后元素会弹回原位，因为尚未编写实际的放置逻辑。

要让项目稳定停留在新位置，需在组件中实现 onDrop 事件。首先导入两个关键函数：
import {CdkDragDrop, moveItemInArray, transferArrayItem} 
from '@angular/cdk/drag-drop';
完整的组件代码：
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title='Angular 7 Project!';
   public personaldetails=[];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails=Array.from(Object.keys(data), 
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data, 
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}
onDrop 函数是拖放逻辑的核心：若拖放发生在同一列表内，使用 moveItemInArray 调整元素顺序；若跨列表（本例仅一个列表，但代码已预留支持），则使用 transferArrayItem 移动元素。
再次刷新浏览器，观察拖放效果：

现在可以自由拖拽项目，整个过程流畅且无闪烁问题。该方案可直接应用于实际项目中。