The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Simple drag and drop with Observables

Simple drag and drop with Observables

Armed with the `map` and `concatAll` functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.
Watch this lesson now

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.


I'm looking forward to the "avoid nesting forEach statements".

I have recently created a layered category filter for an array of products and all I seem to be doing is nesting forEach's.

This series is great!


Good series. Look forward to seeing Observable patterns for async requests.

Would like to have more big picture context for rx: where it is most commonly used, is there overlap with ES6, history and best practices of the library, etc.


The RX video was just a sneak preview to show you how the skills you are learning relate to asynchronous programming. The goal behind the Observable video was to give you the context you need to understand why we are learning how to program without loops. In the next series we will discuss asynchronous programming in-depth and you will get more context around Observable.

In reply to Shawn

This lesson with Drag-n-Drop and Observables is very provocative and valuable. For me, it presents a significant shift in perspectives to UX coding techniques. #awesome.

I searched your source and then online at to find out more about the ReactiveX method takeUntil() method. If anybody else is looking for more information regarding takeUntil, it is part of RxJS and you can find the docs here

Thanks again,
Thomas Burleson


Jafar, great series! very relevant to collaboration web apps. Obvious applications with canvas and SVG


Jafar is a crisp excellent and amazing teacher, very happy to have watched his series on data-driven map/filter/forEach paradigm of Javascript programming :)

Angelo Moreira

Thank you Thomas you just saved me some time, I knew I wasn't the only one wondering about takeUntil :)

In reply to Thomas

I noticed that there is a small bug, if you drag the widget outside of the box and let go, the widget will follow your mouse indefinitely because it is no longer able to take a mouseup event on the parent. Clicking and releasing over the parent fires a mouseup on the widget instead of the parent, so takeUntil(parentMouseUps) no longer works.

I resolved this by changing that line to:

return parentMouseMoves.takeUntil(parentMouseUps).takeUntil(widgetMouseUps);

and adding

var widgetMouseUps = Observable.fromEvent(widget, "mouseup");

above with the rest of the fromEvent statements.

I didn't realize you could chain takeUntil like this, until I just tried it out, and it worked.

Thanks for the great work.

In reply to

What is the next series?Is it the one by Andre Staltz?

In reply to Jafar

mouseDowns.flatMap is a good one as well, by bashing down one level.

Joel's Head
Why are we asking?