Angualr drag-drop里面的功能能让我们非常方便的处理页面上视图的拖拽(自由拖拽、列表排序拖拽、列表之间拖拽)问题。推荐大伙儿直接看官网，因为下面的内容绝大部分内容包括例子都来源于官网 https://material.angular.io/cdk/drag-drop/overview。一直认为官网才是最好的文档。

同样和我们前面讲的cdk里面其他模块的功能一样，drag-drop使用之前也需要导入DragDropModule模块。

一 CdkDrag

CdkDrag是一个指令。添加了CdkDrag指令的视图，表明该视图是可以拖拽的。

Selector: [cdkDrag]

Exported as: cdkDrag

1.1 CdkDrag属性

属性	类型	描述
data: T	@Input(‘cdkDragData’)	CdkDrag指令对应组件元素实例上的数据
disabled: boolean	@Input(‘cdkDragDisabled’)	是否禁用从此容器启动拖动序列(我试了下这个属性好像没效果)
lockAxis: ‘x’ \| ‘y’	@Input(‘cdkDragLockAxis’)	拖曳方向
rootElementSelector: string	@Input(‘cdkDragRootElement’)	传递可拖动元素替代的根元素(换句话说现在是拖动根元素了)
dropped: EventEmitter<CdkDragDrop>	@Output(‘cdkDragDropped’)	当一个拖拽的元素松开的时候，并且是在一个container(容器)里面的时候会回调
ended: EventEmitter	@Output(‘cdkDragEnded’)	拖拽结束的时候调用
entered: EventEmitter<CdkDragEnter>	@Output(‘cdkDragEntered’)	拖拽的时候进入到一个新的容器的时候回调(两个list之间拖拽的时候用到CdkDropList)
exited: EventEmitter<CdkDragExit>	@Output(‘cdkDragExited’)	拖拽的时候退出当前容器的时候回调
moved: Observable<CdkDragMove>	@Output(‘cdkDragMoved’)	在拖拽的过程中会回调
started: EventEmitter	@Output(‘cdkDragStarted’)	在开始拖拽的时候调用
dropContainer: CdkDropListContainer	无
element: ElementRef	无

上面表格中大量的提到了容器，我们可以把下文中提到的CdkDropList指令对应的视图元素当做是一个视图。

1.2 CdkDrag使用

关于CdkDrag的使用，我们就直接贴代码了，很简单就是在我们想要拖动的视图元素上添加CdkDrag指令就行。

import {Component} from '@angular/core';@Component({selector: 'app-drag-drop-drop',template: `<div class="dragParent" style="width: 500px; height: 500px; background-color: #f1f1f1"><div class="example-box" cdkDrag cdkDragRootElement=".dragParent">可以到处拖拽</div></div>`,styles: [`.example-box {width: 100px;height: 100px;border: solid 1px #ccc;color: rgba(0, 0, 0, 0.87);cursor: move;display: flex;justify-content: center;align-items: center;text-align: center;background: #fff;border-radius: 4px;position: relative;z-index: 1;transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),0 2px 2px 0 rgba(0, 0, 0, 0.14),0 1px 5px 0 rgba(0, 0, 0, 0.12);}.example-box:active {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);}`]
})
export class DragDropDropComponent {}

上图中因为我设置CdkDrag指令的cdkDragRootElement属性为灰色的div，所以拖动的是整个灰色的div。

二 CdkDropList

Container that wraps a set of draggable items(可以拖拽item的一个集合，说白了就是把一些可拖元素始放到一起来。用CdkDropList指令来表示)。熟悉android的人可以把他看着是一个ListView。

Selector: [cdkDropList] cdk-drop-list

Exported as: cdkDropList

2.1 CdkDropList属性

属性名字	类型	描述
connectedTo: (CdkDropList	string)[]	CdkDropList
data: T	@Input(‘cdkDropListData’)	拖拽容器上的数据(通常是一个数组或者list)
disabled: boolean	@Input(‘cdkDropListDisabled’)	是否禁用从此容器启动拖动序列
enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean	@Input(‘cdkDropListEnterPredicate’)	指定哪些item是可以拖拽到当前容器
id: string	@Input()	唯一的id,cdkDropListConnectedTo属性的时候可以使用
lockAxis: ‘x’ \| ‘y’	@Input(‘cdkDropListLockAxis’)	指定容器内所有的item的拖拽放下(垂直，水平)
orientation: ‘horizontal’ \| ‘vertical’	@Input(‘cdkDropListOrientation’)	容器里面item的摆放方向(垂直，水平)
dropped: EventEmitter<CdkDragDrop<T, any>>	@Output(‘cdkDropListDropped’)	拖拽结束的时候，当有item落到当前容器的时候回调
entered: EventEmitter<CdkDragEnter>	@Output(‘cdkDropListEntered’)	当item进入当前容器的时候回调
exited: EventEmitter<CdkDragExit>	@Output(‘cdkDropListExited’)	当item离开当前容器的时候回调
sorted: EventEmitter<CdkDragSortEvent>	@Output(‘cdkDropListSorted’)	拖拽过程中交换item的时候回调

2.2 CdkDropList使用

2.2.1 水平方向的CdkDropList

cdkDropListOrientation属性的使用

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';@Component({selector: 'app-drag-drop-orientation-drag',template: `<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div></div>`,styles: [`.example-list {width: 1000px;max-width: 100%;border: solid 1px #ccc;min-height: 60px;display: flex;flex-direction: row;background: white;border-radius: 4px;overflow: hidden;}.example-box {padding: 20px 10px;border-right: 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;flex-grow: 1;flex-basis: 0;}.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 DragDropOrientationDragComponent {timePeriods = ['Bronze age','Iron age','Middle ages','Early modern period','Long nineteenth century'];/*** 移动item的时候，item之间的位置变换* @param event*/drop(event: CdkDragDrop<string[]>) {moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex);}}

2.2.2 两个list之间数据交换

CdkDropList指令cdkDropListConnectedTo属性的使用。同时为方便大家的使用cdk drag-drop也给提供了transferArrayItem()、moveItemInArray()用于两个list之间交互item和单个list之间item位置变换。

import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';@Component({selector: 'app-drag-drop-transferring-item',template: `<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>`,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 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);}}}

2.2.3 可以自己去控制哪些item可以拖进来

我们有一个这样的例子，左边的list里面不接受其他list的数据拖进来，右边的list只接受其他list里面的偶数。代码如下

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;}}

三 CdkDropListGroup

CdkDropListGroup指令的范围比CdkDropList要大一级。CdkDropListGroup可以包含多个CdkDropList。而且当CdkDropListGroup包含多个CdkDropList的时候，这些CdkDropList直接是相互connect的(CdkDropList就不用去写cdkDropListConnectedTo属性了)。

Selector: [cdkDropListGroup]

Exported as: cdkDropListGroup

CdkDropListGroup使用场景：当我们在多个list之间的item需要相互拖动的时候派上用场。

四 CdkDragHandle

Handle that can be used to drag and CdkDrag instance。拖动CdkDrag实例的句柄，简单来说就是指定一个元素。当我们拖动这个元素的时候整个CdkDrag实例都会动。

4.1 CdkDragHandle的使用

import {Component, OnInit} from '@angular/core';@Component({selector: 'app-drag-drop-handle-drag-area',template: `<div class="example-box" cdkDrag>I can only be dragged using the handle<div class="example-handle" cdkDragHandle><svg width="24px" fill="currentColor" viewBox="0 0 24 24"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></div></div>`,styles: [`.example-box {width: 200px;height: 200px;padding: 10px;box-sizing: border-box;border: solid 1px #ccc;color: rgba(0, 0, 0, 0.87);display: flex;justify-content: center;align-items: center;text-align: center;background: #fff;border-radius: 4px;position: relative;z-index: 1;transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),0 2px 2px 0 rgba(0, 0, 0, 0.14),0 1px 5px 0 rgba(0, 0, 0, 0.12);}.example-box:active {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);}.example-handle {position: absolute;top: 10px;right: 10px;color: #ccc;cursor: move;width: 24px;height: 24px;}`]
})
export class DragDropHandleDragAreaComponent {}

五 CdkDragPreview

Element that will be used as a template for the preview of a CdkDrag when it is being dragged。简单点就是drag拖动过程中拖动的item的展示形式。

5.1 CdkDragPreview的使用

比如一个这里的例子，展示影片名字列表，在拖动的时候展示影片对应的图片。

import {Component, OnInit} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';@Component({selector: 'app-drag-drop-customizing-drag-preview',template: `<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie.title}}<img *cdkDragPreview [src]="movie.poster" [alt]="movie.title"></div></div>`,styles: [`.example-list {width: 500px;max-width: 100%;border: solid 1px #ccc;min-height: 60px;display: block;background: white;border-radius: 4px;overflow: hidden;}.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 DragDropCustomizingDragPreviewComponent {movies = [{title: 'Episode I - The Phantom Menace',poster: 'https://upload.wikimedia.org/wikipedia/en/4/40/Star_Wars_Phantom_Menace_poster.jpg'},{title: 'Episode II - Attack of the Clones',poster: 'https://upload.wikimedia.org/wikipedia/en/3/32/Star_Wars_-_Episode_II_Attack_of_the_Clones_%28movie_poster%29.jpg'},{title: 'Episode III - Revenge of the Sith',poster: 'https://upload.wikimedia.org/wikipedia/en/9/93/Star_Wars_Episode_III_Revenge_of_the_Sith_poster.jpg'},{title: 'Episode IV - A New Hope',poster: 'https://upload.wikimedia.org/wikipedia/en/8/87/StarWarsMoviePoster1977.jpg'},{title: 'Episode V - The Empire Strikes Back',poster: 'https://upload.wikimedia.org/wikipedia/en/3/3c/SW_-_Empire_Strikes_Back.jpg'},{title: 'Episode VI - Return of the Jedi',poster: 'https://upload.wikimedia.org/wikipedia/en/b/b2/ReturnOfTheJediPoster1983.jpg'},{title: 'Episode VII - The Force Awakens',poster: 'https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg'},{title: 'Episode VIII - The Last Jedi',poster: 'https://upload.wikimedia.org/wikipedia/en/7/7f/Star_Wars_The_Last_Jedi.jpg'}];drop(event: CdkDragDrop<{ title: string, poster: string }[]>) {moveItemInArray(this.movies, event.previousIndex, event.currentIndex);}}

六 CdkDragPlaceholder

Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged。简单来说就是drag过程中，drag item对应的container里面item的占位符。

6.1 CdkDragPlaceholder使用

如下的例子，拖动的时候，CdkDragPlaceholder对应加个灰色的背景

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";@Component({selector: 'app-drag-drop-customizing-drag-place-holder',template: `<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"><div class="example-box" *ngFor="let movie of movies" cdkDrag><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{movie}}</div></div>`,styles: [`.example-list {width: 500px;max-width: 100%;border: solid 1px #ccc;min-height: 60px;display: block;background: white;border-radius: 4px;overflow: hidden;}.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-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);}.example-custom-placeholder {background: #ccc;border: dotted 3px #999;min-height: 60px;transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}`]
})
export class DragDropCustomizingDragPlaceHolderComponent {movies = ['Episode I - The Phantom Menace','Episode II - Attack of the Clones','Episode III - Revenge of the Sith','Episode IV - A New Hope','Episode V - The Empire Strikes Back','Episode VI - Return of the Jedi','Episode VII - The Force Awakens','Episode VIII - The Last Jedi'];drop(event: CdkDragDrop<string[]>) {moveItemInArray(this.movies, event.previousIndex, event.currentIndex);}
}

关于cdk里面drag-drop的内容咱们就先将这么多，主要就是各个指令的使用。文章中涉及的代码例子 https://github.com/tuacy/angular-cdk-study

Angular cdk 学习之 drag-drop相关推荐

Angular cdk 学习之 Bidirectionality（bidi）
cdk Bidirectionality提供给我们的功能,就是用来设置布局方向.更加详细的内容可以参考官网 https://material.angular.io/cdk/bidi/overview ...
Angular cdk 学习之 Scrolling
Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件.推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scroll ...
Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
源码分析 @angular/cdk 之 Portal
@angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库,开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑,所以他们把这些 ...
HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
angular跳转指定页面_通过 angular CDK 实现页面元素拖放
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动.在特定区域内拖动亦或对列表进行拖放排序等等. 通过 angular CDK 实现 ...
HTML5原生拖拽/拖放(drag drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
源码分析 @angular/cdk 之 Portal 1
@angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库,开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑,所以他们把这些 ...
HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop...
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 原文:重新想象 Window ...

Angular cdk 学习之 drag-drop