我有几个范围,我想将所有范围的总和限制为100.使用此代码我可以完成它,但显然Observables卡在那里并且不会再返回任何值。如何实现相同的效果,但允许滑块向右移动,当然不能使用此限制状态?
let limit = 0;
function setStream(parent) {
const mousemove = Rx.Observable.fromEvent(document, 'mousemove');
const parentBound = parent.getBoundingClientRect();
const parentLeft = parentBound.left;
const parentWidth = parentBound.width;
const percentage = toPercentage(parentWidth);
return (target) => {
const mousedown = Rx.Observable.fromEvent(target, 'mousedown');
const mouseup = Rx.Observable.fromEvent(document, 'mouseup');
return mousedown
.flatMap(() => {
return mousemove
.map((e) => {
const perct = R.compose(Math.round, percentage)(e.clientX - parentLeft);
return {
target: target,
position: perct
};
})
//block range at 100
.filter(state => state.position >= 0 && state.position <= 100 && limit !== 100)
.map((state) => {
const nState = state;
nState.target.style.left = `${nState.position}%`;
return nState;
})
.takeUntil(mouseup);
});
};
}
return Rx.Observable.combineLatest(...sliders$)
.map((state) => {
limit = state.reduce((prev, curr) => curr.position + prev, 0);
return state;
});
谢谢!