用户使用鼠标按下，向上移动和向上移动选择一堆元素（跨度）时如何创建Span目标流

Question

我有这样的情况。

<div id="container"><span>A</span><span>B</span><span>C</span><span>D</span><span>A</span><span>B</span><span>C</span><span>D</span><span>A</span><span>B</span><span>C</span><span>D</span></div>

当用户在任何跨度上开始鼠标移动并在鼠标周围移动并在任何其他跨度上使用鼠标移动鼠标时，我需要捕获（缓冲）其间的每个跨度并将其用作流然后我可以订阅并获取此事件中选择的所有跨度目标。有办法吗？

以下是我目前的情况：

observableFromEventPattern的签名：

    $.fn.collectSelectedSpintax = function(boundaryTarget) {

        //console.log(this);
        //console.log(boundaryTarget);

        if(!!boundaryTarget.hasClass('syns-grammar')) {
            boundaryTarget = boundaryTarget.parent();
        }

        var spans;

        if(boundaryTarget.isAfter(this)) {
            //Get NextUntil
        spans = this.nextUntil(boundaryTarget.next()).addBack();
        }
        else {
            //Prev Until
            //console.log('Going Back');
            spans = this.prevUntil(boundaryTarget.prev()).addBack();
        }


        return {
            selectedSpans: spans,
            selectedSpintax: spintaxFromSpans(spans)
        };
    };

    var observableFromEventPattern = function($parentEle, targetSelector, event){ ... }

    var mouseup = observableFromEventPattern($container, 'span', 'mouseup');
    var mouseMove = observableFromEventPattern($container, 'span', 'mousemove');
    var mouseDown = observableFromEventPattern($container, 'span', 'mousedown')
.map((event) => $(event.target));

    var mouseDrag = mouseDown.flatMap(($startTarget) => {
return mouseMove
    //.tap((event) => event.preventDefault())
    .map((event) => $(event.target))
    .filter(($target) => $startTarget[0] !== $target[0])
    .map(($target) => $startTarget.collectSelectedSpintax($target))
    .distinctUntilChanged()
    .takeUntil(mouseup)
    .filter((obj) => validSpintax(obj.selectedSpintax));

}）;

这似乎有效，但是如果我可以使用缓冲区更大效地选择跨度，那就太棒了。