2

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

我制作了一个有效的 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

4

1 回答 1

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
于 2014-01-16T13:17:22.090 回答