jsPlumb 处理可滚动 div 容器中的元素

Question

我正在使用 jsPlumb 连接一堆 div（很像流程图）。所有的 div 都包含在一个可滚动的父 div 中。有点像下面的代码，但容器 div 中有更多的 div。

<div style="height:500px;width:500px;overflow:auto" id="container">
   <div id="node1"></div>
   <div id="node2"></div>
   <div id="node3"></div>
   <div id="node4"></div>
   <div id="node5"></div>
</div>

我的问题是，如果我滚动 div，jsPlumb 生成的连接线只会留在原地，不会随着它们应该连接到的 div 一起滚动。我试过使用 jsPlumb.repaint() 但仍然没有运气。似乎 jsPlumb 没有考虑到容器 div 的滚动偏移量。有没有办法解决这个问题？我真的很想避免将连接的 div 从容器 div 移到正文中，因为这将需要一些非常烦人的 css/html 重新编码。

Answer 1

事实证明，只需使用 jsPlumb.repaintEverything();在正确的位置重新绘制线条。 jsPlumb.repaint() 似乎用于为特定元素重新绘制线条。比如jsPlumb.repaint('div_id_goes_here');

Answer 2

您的问题/回答帮助了我。让我用我使用的代码来扩展它：

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

这将导致在您滚动容器时重新绘制连接。在 IE 上，根据场景（子节点移动，然后连接移动）会有一点延迟。