Angular material/cdk version 7.0.0-beta is now available. In this release, we have two new exciting features we all waited for — drag and drop and virtual scroll.

In this article, we’ll learn how to use the drag and drop feature. If you want to learn about virtual scrolling, you can read my previous article.

First, we need to install the angular cdk package and import the DragDropModule module.

yarn add @angular/cdk@7.0.0-beta.0

Drag Example —

The module exposes a cdkDrag directive which as the name suggests, make the host draggable.

Basic example

By default, cdkDrag allows free movement in all directions. We can also lock the position of the dragged element along the specified axis.

Lock X axis

The cdkDrag also exposes the following outputs: cdkDragStarted , cdkDragEnded , cdkDragEntered , cdkDragExited , cdkDragDropped , and cdkDragMoved .

cdkDragHandle

With this directive, you can determine who is the draggable handler.

cdkDragHandle

Sortable Example

Adding the cdk-drop around a set of cdkDrag elements groups the draggables into a reorder-able collection. Note that this will not update your data model; you can listen to the dropped event to update the data model once the user finishes dragging.

Sortable example

The package exposes the moveItemInArray method which on drop rearrange the items array according to the indexes. Note that this method mutates the array. I’m suggesting creating an immutable method that does the same.

Sortable demo

Transferring Items between Lists

The cdk-drop component supports transferring dragged items between connected drop zones. You can connect one or more cdk-drop instances by setting the connectedTo property.

Connect list example

You can associate some arbitrary data with both cdkDrag and cdk-drop by setting cdkDragData or data . In our case, the event data property refers to the corresponding items array.