Drag and Drop made easy with RxJS

Nicholas Cunningham
Jul 11 · 3 min read

If you are new to RxJS boy you have been missing out 😎!!

No worries though, now is a great opportunity to start getting involved. In this article you will learn how easy it is to create a drag and drop for any element.
I won’t go in depth about RxJS as I just wanted to make something quickly as this feature is regularly requested 😄.

Let’s begin with have the element which you would like to be dragged

Now that we have the element set up time to wire up the javascript / typescript. I will be using Typescript, however the same can be applied using javascript.

First we should find out element which we would like to drag.

Now for the easy part, RxJS to handle our streams. These are what we are considering:
1. When the user starts to drag the element.
2. When the user is dragging the element.
3. When the user has dropped the element.

This is how we would do it:

The reason I used document for our target on mousemove is the user has the option of moving the mouse outside of our application. I would still want to be able to track it so that when they re-enter the box will still be moving.

There are many ways to handle this but for this example i will use this approach.

Drag me

Now since as we have our element to drag and the events which we are interested in all wired up, let’s compose a drag Observable to push out the positions so that we can change / animate the movement.

If you understand what’s going on here that’s great! Look how easy that is!
I’ll try to explain so that everyone can understand.

What we are doing here is composing the observables (combining them in such as way where we get values when we need to).

We start off with mousedown$ as that will tell us when to start tracking for the positions. I’ll explain the switchMap later. However, inside that flattening operator (unwrap the observable and return the value) we are subscribing to mousemove$ , because i want all the values (positions) while the user is moving the mouse after they have mousedown$.

To find where the box should be moved to it is a simple Math of finding the delta between the start mousedown and the current position of the mouse given bymousemove$ . and can be all describe here for futher reading.

Next we have a takeUntil and we bind it to mouseup$. This is basically saying keep streaming all the events from mousemove$ and when the user releases the mouse i.e. mouseUp then stop tracking the mouse move event.

This is a big benefit to using RxJS as you can actively you can compose streams in different ways all towards your specific use case.

Lastly, we should subscribe and apply the deltas

That’s all!.

If this help give me a 👏 👏 and if not, let me know in the comments below.
Say hi to me on . 😄 😎

See it in action!
By the way, in the stackblitz there is a little easter egg 🥚 🐣.
See if you can find it and understand. If you don’t just research!

Keep on sharing the knowledge it will only make us stronger.

Nicholas Cunningham

Written by

Senior Software Developer using Angular