dnd.es6

// Drag n Drop, using streaming paradigm
const fromEvent = Rx.Observable.fromEvent
const widget = document.getElementById('widget')
const container = document.getElementById('container')

// streams
const mouseDowns = fromEvent(widget, 'mousedown')
const mouseUps = fromEvent(container, 'mouseup')
const mouseMoves = fromEvent(container, 'mousemove')

// drag stream is simply a composite stream!
const drags = mouseDowns.flatMap(evt => mouseMoves.takeUntil(mouseUps)) // flatMap to "merge" branch into trunk
  
// listen to drag stream and react
drags.subscribe(evt => reposition(widget, evt))             

reposition = (el, evt) => {
  el.style.left = evt.clientX + "px"
  el.style.top = evt.clientY + "px"
}