jsplumb を使用して、スクロール可能な 2 つの並列リスト内の項目間のリンクを描画したいと考えています。たとえば、overflow=auto の div 内です。2 つのアイテムがリンクされている場合、リストがスクロールされ、そのうちの 1 つがスクロールされて表示されなくなります。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などを使用して、誰かがそれに対処する方法を提案したり、別のアプローチを提案したりできますか?
ご意見をお寄せいただきありがとうございます。