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
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.
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
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 by
mousemove$ . OffsetX and ClientX 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
If this help give me a 👏 👏 and if not, let me know in the comments below.
Say hi to me on Twitter. 😄 😎
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.