jsplumb连接不工作答案

【问题标题】：jsplumb connect not workingjsplumb连接不工作
【发布时间】：2013-08-20 09:37:04
【问题描述】：

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

我已经制作了一个可以工作的 jsFiddle：http://jsfiddle.net/SCSaf/4/

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

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

在 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

【问题讨论】：

标签： javascript jquery drag-and-drop jsplumb

【解决方案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

【讨论】：