spectrum learns to dig

http://jsbin.com/geqige/edit?js,console,output 선 소스. ( 조금 더 자세한 구현 :  http://jsbin.com/ziraga/edit?html,js,output ) 먼저 Drag and Drop이라는게 어떤 절차인지 생각해보면 이동하고자 하는 대상에 MouseDown 이동하고자 하는 지점까지 MouseMove 이동하고자 하는 지점에서 MouseUp 하는 세개의 동작을 순서대로 실행하는 것이라 할 수 있겠다. 100,100 위치에 있는 A라는 대상을 200,200까지 Drag and Drop을 하는 과정을 표로 옮기면 시간(seq) 행동 좌표 1 mousedown (150,150) 2 mousemove (150,150) 3 mousemove (160,160) 4 mousemove (170,170) 5 mousemove (..., ...) (n-1)th mousemove (250, 250) (n)th mouseup (250, 250) 과 같은 과정을 수행할 것이다. 눈치챘을지도 모르겠지만 mousemove 구간이 바로 Stream이다! Rx 기준으로 그러면 다시 Drag and Drop을 재정의하면 mousedown 이후 시점으로부터 mouseup이 되기전까지 mousemove 를 Observe 하는 것 인것이다. 그러면 재료를 모아보자. mousedown mouseup mousemove 이 세 개를 Observable 로 만들자.   const down$ = Rx.Observable.fromEvent(box, 'mousedown');   const...