自定义拖拽面板angular7_Angular7 Drag and Drop

完整代码在最后，下面讲解以此代码为例

1.环境配置

1.1 安装@angular/material、@angular/cdk

cnpm install --save @angular/material @angular/cdk

1.2 app.modules.ts导入

import { DragDropModule } from '@angular/cdk/drag-drop';

imports: [

...

DragDropModule

]

2.功能实现

2.1 拖拽

html编辑如下代码即可：

drag me

2.2 排序

html:

列表排序

{ {customer.name}}

ts:

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) {

console.log('列表排序：', event, this.customers);

moveItemInArray(this.customers, event.previousIndex, event.currentIndex);

}

执行如下操作：

打印结果：

2.3 横向排序

html:

横向排序

(cdkDropListDropped)="drop($event)">

{ {customer.name}}

2.4 添加动画效果

为了设置动画，我们定义了一个以transform属性为目标的转换。拖放CDK支持动画：

--对列表中的元素进行拖动排序时的动画=> .cdk-drag

.cdk-drag {

transition: transform 100ms ease;

}

--从动画的位置到最终把它放在列表的位置上时的动画=> .cdk-drag-animating

.cdk-drag-animating {

transition: transform 300ms ease;

}

2.5 占位符元素 placeholder

默认占位符

使用.cdk-drag-placeholder来显示占位符元素，而不是实际的元素，因为它是在cdkDropList中拖动的。默认情况下，这看起来与正在排序的元素完全相同。

.cdk-drag-placeholder {

background: #ccc;

border: dotted 1px #999;

transition: transform 500ms ease;

}

拖拽时效果如下图：

自定义占位符

使用*cdkDragPlaceholder指令，我们可以用一个自定义的占位符来代替默认的占位符

html:

{ {customer.name}}

css:

// 自定义占位符

.customph{

.box-custom-placeholder {

height: 28px;

width: 100px;

background: #fff;

border: dotted 1px #0084ff;

transition: transform 200ms ease;

}

&.box-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {

transition: transform 500ms ease;

}

}

2.6 预览

当提取并拖动cdkDrag元素时，可以看到预览元素。默认情况下，预览元素看起来与被拖动的元素完全相同。

使用.cdk-drag-preview来定义预览CSS:

// 预览

.cdk-drag-preview {

height: 28px;

width: 100px;

box-shadow: 0 3px 3px -3px #0084ff;

}

我们还需要使用*cdkDragPreview提供一个自定义模板:

{ {customer.name}}

Age: { {customer.age}}

2.7 多个列表之间拖拽

我们可以使用cdkDropListConnectedTo属性将一个或多个cdkDropList连接到一起。然后设置cdkDropListData和cdkDragData，将数据与cdkDropList和cdkDrag关联起来。

html:

[cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"

(cdkDropListDropped)="drop1($event)">

[cdkDragData]="customer"

*ngFor="let customer of inactiveCustomers"

cdkDrag>

{ {customer.name}}

[cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"

(cdkDropListDropped)="drop1($event)">

[cdkDragData]="customer"

*ngFor&#