Drag and drop in Angular (new #tutorial series!): introduction

Remember using jQuery UI’s Draggable and Droppableplugins, for building drag and drop features in web applications? Awesome, wasn’t it? Now, what if we could implement drag and drop functionality just as easily in Angular projects?

Over the last months, I have been improving my drag and drop implementations in Angular several times. During each iteration, I discovered new tricks that made it cleaner, easier to reuse and more SOLID.

In this series, I like to share my findings with you.

Building your own Angular drag and drop solution can be quite complicated because there are so many use cases and challenges to face.

On top of which, instead of having direct DOM access, you have a framework with a lot of abstraction. And at the same time, you want your newfound solutions to be so generic that you can use them in every Angular project.

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 you need to take into account. Just think of the many strategies you can use for positioning, helper elements, sorting a list or making dropzones.

Alright. Let’s get to work. I have limited this series to six parts:

  1. The draggable directive: tracking drag events. The foundation of our drag/drop ecosystem.
  2. The movable directive: moving elements. A simple positioning strategy.
  3. The movable area: trapping moving elements. Explaining @ContentChildren.
  4. The draggable helper: positioning a floating drag helper element. Featuring the @angular/cdk overlay.
  5. The sortable list: making a list sortable with draggable list items.
  6. The droppable directive: introducing drop zones to enable actual drag and drop.

Environment

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

Goal

My goal is to demonstrate several advanced Angular techniques while avoiding messy solutions. I want things to be as reusable as possible, so I will stick to Angular directives, keep parts separated and I will try not to be too opinionated 😉

Leave a Reply

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