jsPlumb repaintEverything 不适用于所有浏览器，但 Firefox答案

【问题标题】：jsPlumb repaintEverything not working on every browsers but FirefoxjsPlumb repaintEverything 不适用于所有浏览器，但 Firefox
【发布时间】：2016-03-04 21:35:19
【问题描述】：

我正在使用 jsPlumb 在 div 之间画线。棘手的部分是我正在使用引导选项卡窗格，因此在打开页面时可能不会呈现窗格。第二个困难，一些 div 是可折叠的，迫使我重新绘制连接器。

重绘操作在 Firefox 上效果很好，但在任何其他浏览器上，连接器位置错了（Chrome 实际上是根据当前页面偏移量的大小进行偏移量，edge 只是在天空某处重绘所有连接器） .

有什么想法吗？我将尝试尽快发布 MWE（我的代码实际上很大，但这是我所做的）：

jsPlumb.ready(function () {
    jsPlumb.setContainer($('body')); // needed because connected divs are not at the same dom-tree level

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) 
        if (event.target.id == 'carto-pill') {
            drawConnections();
        } else {
            jsPlumb.detachEveryConnection(); // needed otherwise they are still visible when switching tabs
        }
    });
});

function drawConnections() {

    var red = '#ff1d25', orange = '#f7931e' , green = '#39b54a';

    var width = 2;
    var lineWidth = 2;
    var outlineWidth = 2;

    jsPlumb.connect({
        source:'carto-is_supported',
        target:'focused-arg',
        endpoint: [ "Rectangle", {width: width, height: 10 }],
        anchors: ["Right",  [0, 0.25, -1, 0] ],
        paintStyle:{lineWidth: lineWidth, strokeStyle: green},
        endpointStyle:{fillStyle: green, outlineWidth: outlineWidth}
    });
    // many other connections are also drawn
    jsPlumb.repaintEverything();
}

【问题讨论】：

标签： javascript jquery twitter-bootstrap jsplumb

【解决方案1】：

好的，找到了我的解决方案。告诉 jsPlumb 正确的容器是一个问题。我提供的不是“正文”，而是我的顶级主要内容（不包括导航栏），瞧，它神奇地无处不在。

【讨论】：

不错的技巧，对我也有用，使用 jsPlumb.setContainer($("main.main")); 并且每次内容更改（ajax ...）jsPlumb.repaintEverything();