javascript - jsplumb 连接不工作

Question

我正在尝试以编程方式建立一些连接。问题是，当建立连接时，会创建新的端点，而现有的端点不再可点击。我确实有具有可拖动行为的端点。我无法让端点(由连接创建)具有与原始端点相同的属性。

我制作了一个可用的 jsFiddle:http://jsfiddle.net/SCSaf/4/

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

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

在公共(public) var 中，我尝试将源端点 (exampleGreyEndpointOptions) 的属性与端点 (endpointOptions) 结合起来通常我有 paintStyle 使线条/arraw 与可拖动的相同。 anchor 被定义为防止容器之间的连接或方形连接。如您所见，这将用于非常分层的数据模型。

我试图通过添加更多端点选项(取消注释测试)来设置新的端点行为，但这会在 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

Answer 1

为了保留您的端点选项，您需要通过它们的端点而不是它们的 ID 来连接容器。我已经根据它们的容器给出了端点 uuid 并连接了它们。例如 container0 有端点 uuid container0sr(source) 和 container0tr(target)。

我修改了你的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