jsplumb连接不工作

jsplumb connect not working

本文关键字：工作 连接 jsplumb      更新时间：2023-09-26

我正在尝试以编程方式建立一些连接。问题是，当绘制连接时，会创建新的端点，并且现有端点不再可单击。我确实有拖拉行为的终点。我无法使端点（由连接创建）具有与原始端点相同的属性。

我制作了一个工作jsFiddle：http://jsfiddle.net/SCSaf/4/

在下面的代码中，容器被初始化，并绘制连接

jsPlumb.connect({source: "container1", target: "container2"}, common);

在常见的var中，我尝试将源端点（exampleGreyEndpointOptions）的属性与端点（endpointOptions）相结合通常，我使用paintStyle使线条/阵列与可拖动的线条/阵列相同。锚的定义是为了防止容器之间的连接或方形连接。正如您所看到的，这将被用于一个非常分层的数据模型中。

我试图通过添加更多的端点选项来设置新的端点行为（取消注释以进行测试），但这在jsPlumb 中出现了某种合并错误

var common = {
anchors: ["BottomCenter", "TopCenter"],
//endpoints: [{
//    isSource: true,
//    isTarget: false,
//}, {
//    isSource: false,
//    isTarget: true,
//}],
endpointStyles: [exampleGreyEndpointOptions, endpointOptions],
paintStyle: {strokeStyle: color}
};

我没有主意，也不知道如何解决这个错误。我想要的行为是，也可以从端点绘制/拖动新的连接（或删除现有的连接），连接以编程方式绘制

API参考号：http://jsplumbtoolkit.com/apidocs/Connection.html

文档：http://jsplumbtoolkit.com/doc/connections#programmatic

为了保留端点选项，您需要通过它们的端点而不是它们的ID来连接容器。我已经根据它们的容器给了端点uuid并连接了它们。例如，container0具有端点uuidcontainer0sr（源）和container0tr（目标）。

我修改了您的jsFiddle

修改为：

$('.stepnode').each(function(){
    InitContainer($(this));
});

为每个容器的端点提供uuid：

uuid:el.attr("id")+"sr" //for source endpoint options
uuid:el.attr("id")+"tr" //for target endpoint options
jsPlumb.connect({uuids:["container1sr","container2tr"]}); //for connecting based on endpoint uuid
相关文章：