Angualr drag-drop里面的功能能让我们非常方便的处理页面上视图的拖拽(自由拖拽、列表排序拖拽、列表之间拖拽)问题。
官网：https://material.angular.io/cdk/drag-drop/examples。
首先使用之前使用之前一定要先在当前组件的modules中导入DragDropModule 模块。（也适用于子模块）。
app.modules.ts导入
import{ DragDropModule} from'@angular/cdk/drag-drop';
imports:[
DragDropModule
]
1、最简单的拖拽用例。
<div cdkDrag class="drag-box"> drag me</div>
2、排序
<h3>列表排序</h3><div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)"><div class="drag-box" *ngFor="let customer of customers" cdkDrag>{{customer.name}}</div></div>
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';customers = [{ name: 'Adam', age: 23 },{ name: 'Jack', age: 27 },{ name: 'Katherin', age: 26 },{ name: 'John', age: 30 },{ name: 'Watson', age: 42 },];drop(event: CdkDragDrop<string[]>) {moveItemInArray(this.customers, event.previousIndex, event.currentIndex);}
也可以控制拖拽的方向
<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div></div>
cdkDropListOrientation="horizontal" 控制只能水平拖动。
3、两个拖拽框之间的数据交换
CdkDropList指令cdkDropListConnectedTo属性的使用。同时为方便大家的使用cdk drag-drop也给提供了transferArrayItem()、moveItemInArray()用于两个list之间交互item和单个list之间item位置变换。
<div class="example-container"><h2>左边list</h2><divcdkDropList#todoList="cdkDropList"[cdkDropListData]="leftSource"[cdkDropListConnectedTo]="[doneList]"class="example-list"(cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let item of leftSource" cdkDrag>{{item}}</div></div></div><div class="example-container"><h2>右边list</h2><divcdkDropList#doneList="cdkDropList"[cdkDropListData]="rightSource"[cdkDropListConnectedTo]="[todoList]"class="example-list"(cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let item of rightSource" cdkDrag>{{item}}</div></div></div>
export class DragDropTransferringItemComponent {/*** 左边类别数据源*/leftSource = ['Get to work','Pick up groceries','Go home','Fall asleep'];/*** 右边列表数据源*/rightSource = ['Get up','Brush teeth','Take a shower','Check e-mail','Walk dog'];/*** 拖动的时候，list交换item或者单个list里面item位置的变换* @param event*/drop(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);}}}
还可以控制两个拖拽框相互拖进去的元素
import {Component} from '@angular/core';import {CdkDrag, CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';@Component({selector: 'app-drag-drop-controlling-with-item',template: `<div class="example-container"><h2>不接受其他list的数据</h2><divid="all"cdkDropList[cdkDropListData]="all"cdkDropListConnectedTo="even"class="example-list"(cdkDropListDropped)="drop($event)"[cdkDropListEnterPredicate]="noReturnPredicate"><divclass="example-box"*ngFor="let number of all"[cdkDragData]="number"cdkDrag>{{number}}</div></div></div><div class="example-container"><h2>只接受其他list里面的偶数</h2><divid="even"cdkDropList[cdkDropListData]="even"cdkDropListConnectedTo="all"class="example-list"(cdkDropListDropped)="drop($event)"[cdkDropListEnterPredicate]="evenPredicate"><divclass="example-box"*ngFor="let number of even"cdkDrag[cdkDragData]="number">{{number}}</div></div></div>`,styles: [`.example-container {width: 400px;max-width: 100%;margin: 0 25px 25px 0;display: inline-block;vertical-align: top;}.example-list {border: solid 1px #ccc;min-height: 60px;background: white;border-radius: 4px;overflow: hidden;display: block;}.example-box {padding: 20px 10px;border-bottom: solid 1px #ccc;color: rgba(0, 0, 0, 0.87);display: flex;flex-direction: row;align-items: center;justify-content: space-between;box-sizing: border-box;cursor: move;background: white;font-size: 14px;}.cdk-drag-preview {box-sizing: border-box;border-radius: 4px;box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),0 8px 10px 1px rgba(0, 0, 0, 0.14),0 3px 14px 2px rgba(0, 0, 0, 0.12);}.cdk-drag-placeholder {opacity: 0;}.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}.example-box:last-child {border: none;}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}`]})export class DragDropControllingWithItemComponent {all = [1, 2, 3, 4, 5, 6, 7, 8, 9];even = [10];drop(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);}}/** 只接受其他list里面的偶数 */evenPredicate(item: CdkDrag<number>) {return item.data % 2 === 0;}/** 不让其他list里面的数据移入到这个里面来 */noReturnPredicate() {return false;}}
上面就是常见的一些功能，更为详细的功能见官网https://material.angular.io/cdk/drag-drop/examples。
参考博客：
/p/7bed07770131。
如果觉得《Angular 拖拽功能之cdk-- drag-drop》对你有帮助，请点赞、收藏，并留下你的观点哦！
