Armed with the
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.
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.
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 reactivex.io 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 http://reactivex.io/documentation/operators/takeuntil.html.
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:
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.