Javascript RxJs如何处理文档事件

开始使用RxJs。找不到解决这个问题的办法。我有一个可拖动的控件：

startDrag = rx.Observable.fromEvent(myElem,'mousedown')

现在，由于控件太小，

mousemove

和

mouseup

事件应该在文档级别（否则它不会停止拖动，除非光标正好位于元素上）

现在，我如何“捕捉”不再被拖动的正确时刻（

mouseup

）。 您看到订阅

endDrag

的问题了吗？它将在每次单击任何位置时触发，而不仅仅是

myElem

如何一次检查所有3个属性？它应该只使用在

startDrag

和

位置之后发生的document.mouseups

Upd：我的意思是问题不在于移动元素。这部分很简单-订阅
位置
，更改元素的css。
我的问题是-我需要检测鼠标按下的时刻，并知道拖动的确切元素（页面上有多个元素）。如何做到这一点我不知道。
我已经调整了RxJS回购协议中提供的功能，使其按照您的需要运行

显著变化：

mouseUp
监听
文档

目标元素将从
选择添加到返回中

拖动运动在
map
中处理，
map
返回
mouseDown
事件中的目标元素

在
takeUntil（mouseUp）
之后调用，因此只有在拖动过程结束时（每次拖动一次）才会到达
subscribe


工作示例：

函数main（）{
var dragTarget=document.getElementById（'dragTarget'）；
//获取三大事件
var mouseup=Rx.Observable.fromEvent（文档“mouseup”）；
var mousemove=Rx.Observable.fromEvent（文档“mousemove”）；
var mousedown=Rx.Observable.fromEvent（dragTarget，“mousedown”）；
var mousedrag=mousedown.selectMany（函数（md）{
//按下鼠标时计算偏移量
var startX=md.offsetX；
var startY=md.offsetY；
//使用mousemove计算delta直到mouseup
返回鼠标移动。选择（功能（mm）{
如果（mm.preventDefault）mm.preventDefault（）；
else event.returnValue=false；
返回{
//包括目标元素
嗯，目标，
pos:{
左：mm.clientX-startX，
上图：mm.clientY-startY
}
};
})
.map（函数（数据）{
//更新位置
dragTarget.style.top=data.pos.top+'px'；
dragTarget.style.left=data.pos.left+'px'；
//只需返回元素
返回data.elem；
})
.takeUntil（鼠标）
.last（）；
});
//在这里，我们在完成拖动后接收元素
subscription=mousedrag.subscripte（函数（elem）{
警报（'拖动结束于#'+元素id）；
});
}
main（）
#绘图目标{
位置：绝对位置；
宽度：20px；
高度：20px；
背景：#0f0；
}

Wow。。。谢谢你，乔恩！这对我来说似乎非常有效。真见鬼。Rx可能会让初学者感到困惑……是的，关键是你把
takeUntil（）
放在
flatMap
中，而不是放在后面，这样它就可以应用于单个拖动，而不是整个拖动observable@Agzam很高兴你觉得它有用。我喜欢钻研这些问题：）@VishalSakaria耶！你可以用Rx做一些很酷的事情。
endDrag = rx.Observable.fromEvent document,'mouseup'

position = startDrag.flatMap ->
   rx.Observable.fromEvent document,'mousemove'
   .map (x)-> x.clientX
   .takeUntil endDrag