当前位置: 首页 > 知识库问答 >
问题:

如何在jsplumb中从源endpoint建立多个连接

终睿
2023-03-14

我试图用jplumb库做一个流程图。我需要从一个div多个连接。Ex-Div 1应该连接到Div 2和Div 3。我希望源endpoint是相同的,即底部中心。请让我知道应该做些什么来使这项工作谢谢!

共有3个答案

符渊
2023-03-14

将jsplumb配置为使用静态锚点-https://jsplumbtoolkit.com/community/doc/anchors.html#static

车靖琪
2023-03-14

使用以下代码将div1连接到div2和div3

<html>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <script src="/js/JsPlumb/jquery.jsPlumb-1.4.1-all-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

            $(".inner").draggable({

                containment : ([ ".outer" ]),

            });

        var source = $("#div1");
        var target = $("#div2");
        var target2 = $("#div3");

            jsPlumb.connect({
                source : source,
                target : target
            });
            jsPlumb.connect({
                source : source,
                target : target2
            });


        });


</script>
<style type="text/css">
#outer{

    height: 300px;
    width: 300px;
    /*background-color: red;*/

}
.inner{

    height: 30px;
    width: 30px;
    background-color: yellow;
     margin-bottom: 37px;
}
#div2{
    position: relative; left: 114px; top: -7px;
}

</style>
<body>
    <div id="outer">

        <div class="inner" id="div1">
        </div>
        <div class="inner" id="div2">
        </div>
        <div class="inner" id="div3">
        </div>



    </div>


</body>
</html>

添加jsPlumb库

侯向文
2023-03-14

对于目标endpoint,将其设置为全局以进行无限连接:

  var targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "blue", radius: 7 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [["Label", { location: [0.5, -0.5], label: "", cssClass: "endpointTargetLabel" }]]
}; 

对于源endpoint,将其设置为全局以进行无限制连接:

var sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
    strokeStyle: "green", fillStyle: "green", radius: 3, lineWidth: 1
},
isSource: true,
maxConnections: -1,
connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
connectorStyle: connectorPaintStyle, hoverPaintStyle: endpointHoverStyle, connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [["Label", { location: [0.5, 1.5], label: "", cssClass: "endpointSourceLabel", }]]
};
 类似资料:
  • 下面的代码适用于一个if语句,但没有给出另一个if语句的结果,它在第一个查询中显示了'flights'表,但在另一个条件之后,没有显示另一个名为'ISB to Muree'的表。

  • 我正在构建一个逻辑门应用程序,通过jsPlumb连接这些门。 要创建逻辑门终端,我正在做: 这对于向页面添加门和输入以及在它们之间画线来说都很好,但我想使用以下方法预加载一些现有逻辑: 但是connect函数似乎并不关注现有endpoint,而是创建自己的endpoint。 如何在输入源和门的一个目标之间绘制连接?

  • 我正在使用jsPlumb创建一个包含两列的匹配小部件。 jsPlumb实例创建为: 我创建了源和目标,如下所示: 连接过程正常工作。但是在建立一个连接后的问题如果我删除连接,连接endpoint仍然可见。 我尝试添加配置“\u deleteondetch”,还尝试删除connectiondeach上的endpoint。在这两种情况下,endpoint都被删除,但在我尝试连接相同的元素时,它会出错。

  • 问题内容: 我试图理解,我在我的应用程序中使用。我在中编写了以下代码: 我在Windows Xp OS中将4型jdbc连接与oracle 10g EE一起使用 然后我按如下方式检索servlet: 是它还是需要某些配置? 问题答案: 您可以获得第三方库,也可以使用连接池为您提供的Java EE容器(例如,JBoss或WebSphere)。 为此,您可以配置和使用JNDI数据源。 以下是Tomcat

  • 我试图创建动态endpoint,作为我的连接和运行问题的覆盖。我试图模拟这个人在SO上有什么: jsPlumb连接自定义覆盖-endpoint未移动 然而,当我达到这一点时,无论我尝试做什么: 我无法识别连接。我尝试将此逻辑放入绑定连接中,但在尝试建立连接覆盖时,这也不起作用。在这方面提供任何帮助都会非常有帮助。

  • 问题内容: 有人可以提供有关如何建立JDBC连接池的示例或链接吗? 从搜索谷歌,我看到这样做的许多不同方式,这相当令人困惑。 最终,我需要代码来返回一个对象,但是我在入门时遇到了麻烦。欢迎任何建议。 更新: 没有或没有池连接实现?为什么不最好使用这些? 问题答案: 如果你需要一个独立的连接池,那么我首选的是C3P0而不是DBCP(我在上一个答案中已经提到),在重负载下我对DBCP的问题太多了。使用