jsPlumb 和 Bootstrap 网格答案

【问题标题】：jsPlumb and Bootstrap gridsjsPlumb 和 Bootstrap 网格
【发布时间】：2017-05-19 20:23:12
【问题描述】：

为什么 jsPlumb 不能与 Bootstrap 网格一起使用？我正在尝试让 jsPlumb 在使用 Bootstrap 网格的 HTML 页面上的小部件之间绘制箭头。

我在下面包含的代码呈现了一些完全出乎意料的东西。我正在使用 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 移动到一个表格中，那么它看起来是正确的。

【问题讨论】：

标签： twitter-bootstrap jsplumb

【解决方案1】：

您正在混合使用 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>

【讨论】：