Angular 7 Drag and Drop example – Angular Material CDK


The @angular/cdk/drag-drop module helps us drag single item or sort it within a horizontal/vertical list, transfer items between lists, show animations, previews, placeholders, custom drag handles. In this tutorial, we’re gonna create many simple examples that show you how to work with Angular 7 Material CDK – Drag and Drop.

Related Post: Angular 7 Virtual Scroll example – Angular Material CDK

Setup Angular 7 Material CDK

– Run cmd:
npm install @angular/material @angular/cdk

– Import DragDropModule into NgModule:

Angular 7 Drag and Drop item


Add the cdkDrag directive to element to make them draggable:


Lock Direction

Set cdkDragLockAxis on cdkDrag to restrict dragging:


Event Handler

Add functions on cdkDrag to handle events:
cdkDragStarted: emits when user stops dragging.
cdkDragEnded: emits when user starts dragging.
cdkDragMoved: emits when user is dragging the item (for every pixel).

implement the functions:


With a Handle

If we want to restrict the draggable area by a handle element, just add cdkDragHandle directive to an element inside of cdkDrag:


Angular 7 Drag & Drop items in a List

Basic Sorting List

Cover a set of cdkDrag elements by cdkDropList will automatically rearrange the list when an element moves. To update that list, we listen cdkDropListDropped event:

We use drag-and-drop CDK moveItemInArray function to move an item and to calculate the new index of the dropped item inside the array:


Horizontal List

By default, cdkDropList directive make the list vertical. We can change by setting the orientation property to "horizontal".



To set up your animations, we define a transition that targets transform property.
drag-and-drop CDK supports animations while:
– sorting an element inside a list => .cdk-drag


– animating it from the position we dropped it to final place in the list => .cdk-drag-animating


Default placeholder

Use .cdk-drag-placeholder to show a placeholder element instead of the real element as it’s being dragged inside a cdkDropList. By default, this will look exactly like the element that is being sorted.


Custom placeholder

Using *cdkDragPlaceholder directive, we can replace default placeholder with a custom one:


With Preview

When a cdkDrag element is picked up and dragged, a preview element could be visible. By default, the element looks exactly like the element that is being dragged.
We use .cdk-drag-preview to define preview CSS:

We also need to provide a custom template using *cdkDragPreview:


Angular 7 Drag & Drop between Lists


We can connect one or more cdkDropList together using cdkDropListConnectedTo property. Then we set cdkDropListData and cdkDragData for associating data with cdkDropList and cdkDrag.

Implementation of cdkDropListDropped function will use drag-and-drop CDK moveItemInArray and transferArrayItem:


Event Handler with List
Drag Event Handlers

cdkDragStarted: emits when the user starts dragging the item.
cdkDragEnded: emits when the user stops dragging the item.
cdkDragEntered: emits when the item are moved into a new container.
cdkDragExited: emits when dragging the item into another container.

Implementations of the functions:


Drop Event Handlers

cdkDropListDropped: emits when an item was dropped inside the container.
cdkDropListEntered: emits when a new item is dragged into this container.
cdkDropListExited: emits when an item is dragged from this container into another container.

Implementations of the functions:


Source Code


By grokonez | November 11, 2018.

Related Posts

7 thoughts on “Angular 7 Drag and Drop example – Angular Material CDK”

  1. Hi @all,
    Is der any way to make a vertical and horizontal list?
    Like that:
    1 2 3 4 5 6
    7 8 9 a b c
    d e f g
    Where i can drag “e” to positon after 4?


  2. i have a scenario that i need to design a card like identity card organization customize the card using drag and drop means putting the name , expiry etc on card which is basically a image how can i utilize it so that it will be used in other page means i set from organization page and resemble the result in the other page after saving the style of it

  3. How can i lock element in position?
    I have [a,b,c,d,e] array.
    I want that ‘a’ and ‘b’ to be locked and ‘c’, ‘d’ and ‘e’ can never be before ‘b’ neither ‘a’.


  4. Thanks for the great work man , really appreciate . Looking for the exact code.

    Once again thank you mate. Lot’s of love.

  5. Hi!
    Thanks for amazing explanation
    I just did not understand- how do i get the index of every element in the list after dragging?

    thanks in advance!

Got Something To Say:

Your email address will not be published. Required fields are marked *