jsPlumb 和 Bootstrap 网格 [英] jsPlumb and Bootstrap grids

查看：23
本文介绍了jsPlumb 和 Bootstrap 网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我在下面包含的代码呈现出完全出乎意料的东西.我正在使用 Firefox 进行测试.

<html ng-app=""><头><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><风格>#diagramContainer {填充:20px；宽度:80%；高度:400px；边框:1px纯灰色；}.物品 {/*高度:80像素；*/宽度:80px；边框:1px纯蓝色；/*向左飘浮;*/边距:50px；}</风格><身体><div id="diagramContainer"><div class="row"><div class="col-sm-4"><div id="A" class="item">A</div>

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

<div class="row"><div class="col-sm-4"></div><div class="col-sm-4"><div id="C" class="item">C</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><脚本>jsPlumb.ready(function() {常见变量 = {连接器:[流程图"]，锚点:[左"，右"]，端点:点"};jsPlumb.connect({来源:"A",目标:B"}， 常见的);jsPlumb.connect({来源:"A",目标:C"}， 常见的);});</html>

如果我将 div:A、B 和 C 移动到一个表格中，那么它看起来是正确的.

解决方案

您正在混合 jQuery 库(3.2.1 和 1.9.1)并且您使用的是旧版本的 jsplumb.

jsPlumb.ready(function() {常见变量 = {连接器:[流程图"]，锚点:[左"，右"]，端点:点"};jsPlumb.connect({来源:"A",目标:B"}， 常见的);jsPlumb.connect({来源:"A",目标:C"}， 常见的);});

#diagramContainer {填充:20px；宽度:80%；高度:400px；边框:1px纯灰色；}.物品 {/*高度:80像素；*/宽度:80px；边框:1px纯蓝色；/*向左飘浮;*/边距: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 class="col-xs-4 col-md-4"><div id="B" class="item">B</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>

Why doesn't jsPlumb work with the Bootstrap grid? I'm trying to get jsPlumb to draw arrows between widgets on an HTML page that is using a Bootstrap grid.

The code that I've included below renders something totally unexpected. I'm using Firefox to test this with.

<!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>

If I move the divs: A, B, and C into a table then it looks right.

解决方案

You are mixing jQuery libraries (3.2.1 and 1.9.1) and you are using an old version of 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>

这篇关于jsPlumb 和 Bootstrap 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆