jsplumb连接不工作

Question

我试图以编程方式建立一些连接。问题是，当绘制连接时，会创建新的endpoint，而现有endpoint不再可单击。我确实有拖动行为的endpoint。我无法让endpoint（由连接创建）具有与原始endpoint相同的属性。

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

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

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

在公共变量中，我尝试将源endpoint（exampleGreyEndpointOptions）的属性与endpoint（endpointOptions）的属性组合在一起。在公共变量中，我使用paintStyle使线/阵列与可拖动的线/阵列相同。锚固件的定义旨在防止容器之间的连接或方形连接。正如您所看到的，这将在一个非常分层的数据模型中使用。

我试图通过添加更多endpoint选项（取消对测试的注释）来设置新的endpoint行为，但这会在jsPlumb中产生某种合并错误

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

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

API ref：http://jsplumbtoolkit.com/apidocs/Connection.html

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

Answer 1

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

我已经修改了你的JSFIDLE

修改是：

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

为每个容器的endpoint提供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