我们希望使用 jsplumb 在两个并行的、可滚动的列表中绘制项目之间的链接——比如说，在具有溢出=自动的 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 或其他方式？
提前感谢您的任何想法。