Drag and drop in Angular: introduction
Building drag and drop features in web applications is not new. I remember using jQuery UI's
Droppable plugins, which were really awesome. However, since I am now using Angular 2+ for my project, I need to do things differently. Instead of direct DOM access, I now have a framework with a lot of abstraction. At the same time, I want it to be so generic that I can use in every Angular project.
Over the last months, I have been improving my drag and drop implementation in Angular several times. During each iteration, I discovered new tricks that made everything cleaner, reusable and more SOLID.
Building your own drag and drop solution can be quite complicated, because there are so many use cases and challenges to face. Of course, dragging itself is in fact quite easy. It’s just about grabbing an element, moving it somewhere else and releasing it. But there is so much more. Think of the many strategies you can use for positioning, about helper elements, sorting a list or making dropzones.
I have limited this series to six parts:
- The draggable directive: tracking drag events. The foundation of our small drag/drop ecosystem.
- The movable directive: moving elements. A simple positioning strategy.
- The movable area: trapping moving elements. Explaining @ContentChildren.
- The draggable helper: positioning a floating drag helper element. Featuring the @angular/cdk overlay.
- The sortable list: making a list sortable with draggable list items.
- The droppable directive: introducing drop zones to enable actual drag and drop.
For my work environment, I use Webstorm as IDE, Angular CLI to generate the project, and Angular 5 with RxJS 5.5 as framework. In part 4, I will make use of @angular/cdk (the Angular Component Dev Kit).
My goal is to demonstrate several advanced Angular techniques, while avoiding messy solutions. I want things to be reusable as possible, so I will stick to Angular directives and keep things separated and not too opinionated. Sometimes, I will compare different approaches.