Angular 7 Drag and Drop example – Angular Material CDK

angular-7-drag-drop-example-meterial-cdk-feature-image

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

Basic

Add the cdkDrag directive to element to make them draggable:

angular-7-drag-drop-example-basic-dragable

Lock Direction

Set cdkDragLockAxis on cdkDrag to restrict dragging:

angular-7-drag-drop-example-lock-direction

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:

angular-7-drag-drop-example-event-handler

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-example-with-handle

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:

angular-7-drag-drop-example-basic-sort-list

Horizontal List

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

angular-7-drag-drop-example-horizontal-list

Animations

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

angular-7-drag-drop-example-animation-sort-list

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

angular-7-drag-drop-example-animation-sort-list-simple

Placeholder
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.

angular-7-drag-drop-example-placeholder

Custom placeholder

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

angular-7-drag-drop-example-custom-placeholder

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-example-drag-preview

Angular 7 Drag & Drop between Lists

Basic

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:

angular-7-drag-drop-example-transfer-lists-item

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:

angular-7-drag-drop-example-transfer-lists-drag-event-handlers

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:

angular-7-drag-drop-example-transfer-lists-drop-event-handlers

Source Code

AngularMaterialCDK-Drag-Drop-example

By grokonez | November 11, 2018.



Related Posts


2 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?

    Greetings

Got Something To Say:

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

*