jsPlumb & bootstrap 水龙头：连接显示不正确

Question

问题： 我目前正在构建过程模拟。我有 2 个 bootstrap 个水龙头，一个包含一个编辑器（工作正常），另一个用于在模拟期间显示内容。 JsPlumb 用于显示不同的模拟对象。问题是如果点击从编辑器切换到模拟，这些对象之间的连接将无法正确显示。在拖动元素后它们 "snap" 到正确的位置，但我希望它们在点击开关上正确呈现。这是一个fiddle：Problem fiddle
代码：

html:

 <div class="container-fluid">
       <ul class="nav nav-pills">
          <li class="active">
            <a href="#editor" data-target="#editor" data-toggle="tab">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
            </a> 
          </li>
          <li>
             <a href="#display" data-target="#display" data-toggle="tab" id="testlink">
             <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
            </a>
          </li>
       </ul>
    </div>
 <div class="tab-content">
    <div class="tab-pane fade in active" id="editor"> </div>

    <div class="tab-pane fade" id="display">
       <div class="container center-block content">
         <div id="test1" class="window">
            a
         </div>

         <div id="test2" class="window">
           b
         </div>
     </div>
   </div>

Javascript:

jsPlumb.ready(function() {
   jsPlumb.Defaults.Container = $('#display');


   jsPlumb.connect({
     source: $('#test1'),
     target: $('#test2'),
     anchor: "Continuous",
     endpoint: "Blank",
     detachable: false

   });

   jsPlumb.draggable($(".window"));

 });

我所知道的：问题直接与加载时不显示选项卡内容这一事实有关，因为将测试 div 放入编辑器点击（加载时处于活动状态）解决了问题。 fiddle: placing divs in aktive tab

Answer 1

不是最佳解决方案，但这个可行：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  if (event.target.id == 'display-tab') {
    jsPlumb.detachEveryConnection();
    redrawEveryConnection();
  }
});

此代码删除了标签切换到模拟的每个连接并调用重绘函数，该函数必须根据情况实现（起点和端点必须保存在某个地方，例如服务器）。

jsPlumb & bootstrap 水龙头：连接显示不正确

jsPlumb & bootstrap taps: Connections are not displayed correctly

javascript

jquery

html

twitter-bootstrap

jsplumb