Skip to content

Instantly share code, notes, and snippets.

@dirkluijk dirkluijk/drag-drop-introduction.md Secret
Last active Mar 18, 2018

Embed
What would you like to do?
Welcome file

Drag and drop in Angular: introduction

Building drag and drop features in web applications is not new. I remember using jQuery UI's Draggable and 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:

  1. The draggable directive: tracking drag events. The foundation of our small 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 reusable as possible, so I will stick to Angular directives and keep things separated and not too opinionated. Sometimes, I will compare different approaches.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.