Question

我们希望使用jsplumb在两个并行的可滚动列表中的项目之间绘制链接 - 例如，在具有overflow = auto的div中。如果链接了两个项目，则滚动列表以使其中一个滚动到视图之外，仍然绘制在div外部的jsplumb链接部分。下面是一个示例页面（需要一个jquery js文件和jsplumb js文件在同一目录中，根据脚本包括显示）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="jquery.jsPlumb-1.3.8-all-min.js" type="text/javascript"></script>
    <script type="text/javascript">


        $(function () {

            $('#leftdiv').scroll(function () {
                jsPlumb.repaintEverything();
            });

            $('#rightdiv').scroll(function () {
                jsPlumb.repaintEverything();
            });

            jsPlumb.importDefaults({
                // default drag options
                DragOptions: { cursor: 'pointer', zIndex: 2000 },
                EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}],
                Endpoints: [["Dot", { radius: 2}], ["Dot", { radius: 2}]]
            });
            var allSourceEndpoints = [], allTargetEndpoints = [];
            var connectorPaintStyle = {
                lineWidth: 2,
                strokeStyle: "#deea18",
                joinstyle: "round"
            },
            // .. and this is the hover style. 
            connectorHoverStyle = {
                lineWidth: 2,
                strokeStyle: "#2e2aF8"
            };
            var sourceEndpoint = {
                endpoint: "Dot",
                paintStyle: { fillStyle: "#225588", radius: 2 },
                isSource: true,
                connector: ["Straight", { stub: 40}],
                connectorStyle: connectorPaintStyle,
                hoverPaintStyle: connectorHoverStyle,
                connectorHoverStyle: connectorHoverStyle,
                dragOptions: {}
            };
            var targetEndpoint = {
                endpoint: "Dot",
                paintStyle: { fillStyle: "#558822", radius: 2 },
                hoverPaintStyle: connectorHoverStyle,
                maxConnections: -1,
                dropOptions: { hoverClass: "hover", activeClass: "active" },
                isTarget: true
            };

            _addEndpoints = function (toId, sourceAnchors, targetAnchors) {
                if (sourceAnchors)
                    for (var i = 0; i < sourceAnchors.length; i++) {
                        var sourceUUID = toId + sourceAnchors[i];
                        allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID }));
                    }
                if (targetAnchors)
                    for (var j = 0; j < targetAnchors.length; j++) {
                        var targetUUID = toId + targetAnchors[j];
                        allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID }));
                    }
            };

            _addEndpoints("plumbleft", ["RightMiddle"]);
            _addEndpoints("plumbright", null, ["LeftMiddle"]);

            jsPlumb.connect({ uuids: ["plumbleftRightMiddle", "plumbrightLeftMiddle"] });


        });

    </script>

</head>
<body>
    <div style="height: 100px">
    </div>
    <table >
        <tr >
            <td >
                <div id="leftdiv" style="height: 200px; overflow: auto; ">
                    Here's some longer text<br />
                    Here's some text<br />
                    Here's some text<br />
                    <span id="plumbleft">linked</span><br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                </div>
            </td>
            <td>
                <div id="rightdiv" style="height: 200px; overflow: auto">
                    Here's some longer text<br />
                    Here's some text<br />
                    Here's some text<br />
                    <span id="plumbright">linked</span><br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                </div>
            </td>
        </tr>
    </table>

</body>
</html>

我们已经尝试了各种z-index技巧来剪辑/隐藏不应该显示的行（或部分行）但没有任何运气。任何人都可以建议如何处理它，或建议使用jsplumb或其他方法吗？

提前感谢任何想法。

Answer 1

我从你的代码中创建了一个jsFiddle：

http://jsfiddle.net/sporritt/fpbqd/10/

..可以做你想做的事。但是你必须使掩码div绝对定位，这在你的最终UI中可能会变得棘手。无论如何。它可能有点hacky但它可以完成。

jsplumb - 滚动视图时隐藏连接器

1 个答案: