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);
}也可以控制拖拽的方向
扫描二维码关注公众号，回复：
8839621 查看本文章
<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>
<div
cdkDropList
#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>
<div
cdkDropList
#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>
<div
id="all"
cdkDropList
[cdkDropListData]="all"
cdkDropListConnectedTo="even"
class="example-list"
(cdkDropListDropped)="drop($event)"
[cdkDropListEnterPredicate]="noReturnPredicate">
<div
class="example-box"
*ngFor="let number of all"
[cdkDragData]="number"
cdkDrag>
{{number}}
</div>
</div>
</div>
<div class="example-container">
<h2>只接受其他list里面的偶数</h2>
<div
id="even"
cdkDropList
[cdkDropListData]="even"
cdkDropListConnectedTo="all"
class="example-list"
(cdkDropListDropped)="drop($event)"
[cdkDropListEnterPredicate]="evenPredicate">
<div
class="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。
参考博客：
