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

12:35
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
Avatar
egghead.io

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.

Avatar
Stephen

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!

Avatar
Shawn

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.

Avatar
Jafar

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
Avatar
Thomas

Jafar,
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.

Thanks again,
Thomas Burleson

Avatar
Nolan

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

Avatar
Chris

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 :)

Avatar
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
Avatar
Byron

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 egghead.io
Avatar
Nik

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

In reply to Jafar
Avatar
ray

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

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?