Angular Drag & Drop with CDK

1. Introduction/Motivation

If you want to develop an app and make it more interactive than a normal web app, you can implement the CDK (Component Development Kit) drag and drop feature in Angular. Besides sortable lists and normal items such as div elements, there are other ideas in which cases drag&drop can be useful. The advantage of using the CDK functions is that you don’t have to implement the animations and functionality yourself and the function can be used intuitively. In addition, there are some predefined rules and functions that can be easily implemented, such as sorting within two lists, where you can only transfer from the first list to the second, but not from the second list to the first list. A classic example of this is a simple to-do list.

2. Implementation and general features

2.1 Getting started

Install Angular CDK via npm:

Import into modules where you want to use drag and drop:

In general, Angular CDK provides the DragDropModule (in NgModule). Any element, for example a tile, can be made draggable by adding the directive cdkDrag to any location within the HTML tag. If, on the other hand, you want to create a list, you have to add a cdkDropList (with listening to cdkDropListDropped event to update data model) to the HTML tag that encloses the HTML tag with cdkDrag.

In general, the following things can be summarized:

• append/assign data:              cdkDragData/cdkDropListData
  

• animations via classes (if necessary with transformation in CSS):    .cdk-drag, .cdk-drag-animating
• fitting the drag-area:             cdkDragHandle (image should be included in tag where Handle is used)
• restrict drag&drop area:       cdkDragBoundary = “.CSSclass”
• restricting the movement:     cdkDrop(List)LockAxis=”x”/”y”
• disable dragging:
  • single element:          cdkDragDisabled (to cdkDrag)
  • whole list:                  cdkDropListDisabled (to cdkDropList)
  • handle:                       cdkDragHandleDisabled (to cdkDragHandle)
• delayed dragging:                [cdkDragStartDelay] = “xxx” (in ms)

2.2 Normal Elements

Normal drag&drop elements such as tiles offer a variety of implementation possibilities. For example, they can be used within a calendar function to intuitively move appointments from one day to another. With regard to the functions mentioned above, in such a case, for example, the days (weekend days) as well as the drag-area can be restricted so that the element can only be dropped at certain positions and days. Besides the calendar example, a drag&drop function is also useful and easy to implement, for example, if you have a number of data such as photos or PDF files that should be able to be moved within a web application in order to re-sort them or move them to a different location.

2.2 Lists and special features

Lists are an attractive application for drag & drop as they are quite easy to implement and Angular brings some advantages. Angular brings the following functionalities:

• simple list:
  • cdkDrag in combination with cdkDropList specify list in HTML tag
  • on reordering listen to cdkDropListDropped and update model after change
    
    JavaScript

    (cdkDropListDropped)="drop($event)"

    1	(cdkDropListDropped)="drop($event)"

  • lists can be arranged vertically/horizontally
• connect several lists with each other:
  • cdkDropListGroup (around list, for unknown set of lists) OR
  • cdkDropListConnectedTo
    
    
    JavaScript

    [cdkDropListConnectedTo]="idOfElement"

    1	[cdkDropListConnectedTo]="idOfElement"

• restrict wether element may be moved to list or not:
  • cdkDropListEnterPredicate, returns “true”/”false”
    
    JavaScript

    [cdkDropListEnterPredicate]=“functionName“

    1	[cdkDropListEnterPredicate]=“functionName“

• sorting by indices in list:
  
  JavaScript

  [cdkDropListSortPredicate]="sortPredicateFunction" // e.g. not all indices are allowed in list

  1	[cdkDropListSortPredicate]="sortPredicateFunction"  // e.g. not all indices are allowed in list

• disable sorting:
  • cdkDropListSortingDisabled (in cdkDropList)
    -> new elements are always inserted at the same position
• specifying if element can be dropped in specific area:
  
  JavaScript

  [cdkDropListEnterPredicate]="decisionFunction" // returns true/false

  1	[cdkDropListEnterPredicate]="decisionFunction" // returns true/false

  
   

2.3 Styling the elements

The styling of the elements is done via predefined classes, which can be found here. By default, the classes only bring the styles that are needed for the functionality. You can easily access the classes via CSS and thus style the corresponding elements as needed. Alternatively, you can define your own classes in the HTML tags and style them. In addition to styling, Angular CDK drag&drop also supports animations. These can also be customized as needed.

3. Summary

The implementation of drag&drop elements are significantly facilitated by Angular material CDK and lead to a more intuitive operation of the website/web application for the user. There is a wide range of application possibilities which often already get by with the standard functionality of the provided possibilities, which enables a fast development of apps or applications.