Angular使用自带拖动组件-实现拖动效果

前言

    客户需求：某块内容能拖动改变顺序。网上也找过第三方组件，但是没用成功，可能是姿势不对
于是就发现了angular 自带的拖动组件。
注：本文记录简单的使用，并没有太多的理解。
更多用法，看官网吧===>angular官网拖动

结果演示

（不知道为啥，录制的gif上传后总是变成png，无奈只能重新截个图了）

目录

一、xxx.module.ts 中相关操作

二、xxx.components.ts 中相关操作

三、xxx.components.html 中相关操作

正文

一、xxx.module.ts 中相关操作

1. 关键代码

...
import { DragDropModule } from '@angular/cdk/drag-drop';
...
imports: [
...
   DragDropModule,
...
 ],

2. 说明

我的是在 app.module.ts 中引入的。

---

二、xxx.components.ts 中相关操作

1. 关键代码

...
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
...
public test_dataList = []
 ngOnInit() {
   for(let i=0;i<14;i++){
     this.test_dataList.push( {
       key: `测试key${i}`,
       title: `测试title${i}`,
       btnTitle: `测试value${i}`,
     })
   }
 }
drag(event: CdkDragDrop<string[]>) {
  //如果在同意容器内移動
  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);
  }
}

2. 说明

• drag方法为拖动操作后的回调，if else 用于判断是否在一个容器中，显然我们的从来都在一个容器中拖动，所以程序不会走到这里来
• drag中 moveItemInArray() 表示在同一个容器中移动方法，模块自带的。同理 transferArrayItem() 表示在不同容器中移动方法；

---

三、xxx.components.html 中相关操作

1. 关键代码

 <div class="yin_box" cdkDropList  [cdkDropListData]="test_dataList"
      (cdkDropListDropped)="drag($event)">
      <div *ngFor="let itemObj of test_dataList" class="container" cdkDrag>
          <div class="title">{{itemObj.title}}</div>
          <div class="btn">{{itemObj.btnTitle}}</div>
          <div class="hoverView">{{itemObj.btnTitle}}</div>
      </div>
  </div>

2. 说明

• 【cdkDropListData】拖动过程中，被操作的数据
• (cdkDropListDropped) 拖动事件回调

---

希望没有遗漏啥~~~更多详细的用法建议看官网