Getting to Know the Angular CDK Drag and Drop Feature
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.0Drag Example —
The module exposes a cdkDrag directive which as the name suggests, make the host draggable.
By default, cdkDrag allows free movement in all directions. We can also lock the position of the dragged element along the specified 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.
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.
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.
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.
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.
If the user is dragging an element within the same container, we perform a sortable action; otherwise, we transform the value from one collection to the other using the built-in transferArrayItem() method. ( note that this method mutates the array )
enterPredicate
The enterPredicate input expects a function that is used to determine whether an item is allowed to be moved into a drop container.
For example, we can disallow from one container to drag items into the other.
cdkDragPlaceholder
You can pass template that will be used as the placeholder when the element is being dragged. The placeholder is displayed in place of the element being dragged.
cdkDragPreview
Element that will be used as a template for the preview of a cdkDrag when it is being dragged.
That’s all. For further information check out the docs.
New Angular Meetup in Tel-Aviv
We’ll be hosting a meet-up entitled “Kickass Angular” where we’ll be showcasing the cutting edge technologies we use/have come up with. You’re welcome to join us if you’re in town 😀
Signup and reserve a seat! 👇🏻
👂🏻 Last but Not Least, Have you Heard of Akita?
Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment for over seven months, and we’re continually adding features to it.
Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.
I highly recommend checking it out.
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
