Drag and Drop

Let's see how we can build an interesting Drag and Drop application in Rx using the patterns from the stopwatch application.

We'll cover the following

I’m sure you’re just jaw-droppingly stunned at the amazing wonder of a stopwatch. Even in this basic example, you should start to see how Rx can simplify our complicated frontend codebases. Each call is cleanly separated, and the view update has a single location.

Important question

While it provides a neat demo, modern websites aren’t made entirely of stopwatches, so why build one at all?

The patterns in this example didn’t just solve the mystery of the stopwatch. Everything you’ve built so far in this chapter sums into a pattern that solves any problem of the shape, “Upon an initiating event, watch a stream of data until a concluding event occurs.” This means that this code also solves one of the biggest frontend frustrations: Drag and Drop.

Drag and Drop

Another example of RxJS’s power is drag-and-drop. Anyone who has tried to implement drag-and-drop without a library understands just how hair-pulling frustrating it is.

Get hands-on with 1400+ tech skills courses.