0
jsPlumbがBootstrapグリッドで動作しないのはなぜですか？私はjsPlumbに、ブートストラップグリッドを使っている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を、それが右に見えます。
