jsPlumb和Bootstrap網格

爲什麼jsPlumb不能使用Bootstrap網格？我試圖讓jsPlumb在使用Bootstrap網格的HTML頁面上的小部件之間繪製箭頭。jsPlumb和Bootstrap網格

我在下面包含的代碼呈現了一些完全意想不到的情況。我使用Firefox來測試。

<!DOCTYPE html> 
<html ng-app=""> 
<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
     #diagramContainer { 
      padding: 20px; 
      width:80%; height: 400px; 
      border: 1px solid gray; 
     } 

     .item { 
      /*height:80px; */ 
      width: 80px; 
      border: 1px solid blue; 
      /*float: left;*/ 
      margin:50px; 
     } 
    </style> 
</head> 
<body>  
    <div id="diagramContainer"> 
     <div class="row"> 
      <div class="col-sm-4"> 
        <div id="A" class="item">A</div> 

      </div> 
      <div class="col-sm-4"> 
        <div id="B" class="item">B</div> 

      </div> 
     </div> 
     <div class="row"> 
       <div class="col-sm-4"></div> 
       <div class="col-sm-4"> 
       <div id="C" class="item">C</div> 
       </div> 
     </div> 
    </div> 


    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script> 

    <script> 
     jsPlumb.ready(function() { 
      var common = { 
       connector: ["Flowchart"], 
       anchor: ["Left", "Right"], 
       endpoint:"Dot" 
      }; 

      jsPlumb.connect({ 
       source:"A", 
       target:"B" 
      }, common); 
      jsPlumb.connect({ 
       source:"A", 
       target:"C" 
      }, common); 
     }); 
    </script> 

</body> 
</html>

如果我提出的div：A，B，和C到一個表，然後它看起來正確。

來源

2017-05-19 shrewmouse

你混合的jQuery庫（3.2.1和1.9.1），你使用的是舊版本jsplumb的。

jsPlumb.ready(function() { 
 
    var common = { 
 
     connector: ["Flowchart"], 
 
     anchor: ["Left", "Right"], 
 
     endpoint:"Dot" 
 
    }; 
 

 
    jsPlumb.connect({ 
 
     source:"A", 
 
     target:"B" 
 
    }, common); 
 
    jsPlumb.connect({ 
 
     source:"A", 
 
     target:"C" 
 
    }, common); 
 
});

#diagramContainer { 
 
    padding: 20px; 
 
    width:80%; height: 400px; 
 
    border: 1px solid gray; 
 
} 
 

 
.item { 
 
    /*height:80px; */ 
 
    width: 80px; 
 
    border: 1px solid blue; 
 
    /*float: left;*/ 
 
    margin:50px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.2.9/jsplumb.min.js"></script> 
 

 
<div id="diagramContainer"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-md-4"> 
 
      <div id="A" class="item">A</div> 
 

 
     </div> 
 
     <div class="col-xs-4 col-md-4"> 
 
      <div id="B" class="item">B</div> 
 

 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-md-4"></div> 
 
     <div class="col-xs-4 col-md-4"> 
 
      <div id="C" class="item">C</div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-19 20:41:26 gaetanoM

jsPlumb和Bootstrap網格

回答

相關問題