jsPlumb以编程方式连接源和目标

Question

我正在用jsPlumb构建一个UI，因为我有多个可以连接在一起的盒子。每个框有1个目标和3个源，使用对同一个框DOM元素调用的makeTarget和makeSource方法生成。

jsPlumb.makeTarget($('#box_id'), targetData);
jsPlumb.makeSource($('#box_id'), sourceData1);
jsPlumb.makeSource($('#box_id'), sourceData2);
jsPlumb.makeSource($('#box_id'), sourceData3);

每个源通过将其连接到方框不同部分的过滤器属性进行区分：

sourceData1.filter = '.filter_1';
sourceData2.filter = '.filter_2';
sourceData3.filter = '.filter_3';

只能在一个盒子的源和另一个盒子的目标之间进行连接。目标锚点是连续的。

这种安排非常适合我需要的东西，只要处理盒子和拖放连接。

当我想从JSON对象重新创建保存的UI时，问题就出现了。我可以毫无问题地重新创建框的位置，但我找不到一种方法来重新创建连接，以从框上可用的3个正确源开始。

我试图使用保存的uuid重新连接，但结果是在创建连接之前endpoint还不存在。我尝试的另一种方法是只连接源和目标框id：

jsPlumb.connect({ 
    source:"box_id1", 
    target:"box_id2",
});

但这永远不会将正确的源连接到目标，并且连接与用户创建的连接并不完全相同。如果连接是从源1启动的，那么使用此方法可以从源3启动。

基本上，我在问，在使用jsPlumb API创建endpoint之前，是否可以通过编程方式连接源和目标？

那么，在这种情况下是否有可能重新创建连接，或者我应该寻找其他解决方案？

谢谢

注意：您可以在此处找到有关UI、其设置和问题的更多信息：https://github.com/sporritt/jsPlumb/issues/77

Answer 1

尝试将UUID分配给endpoint。

    jsPlumb.addEndpoint('#box_id', { uuid: $('#box_id_source1' }, {isSource: true,isTarget: false});
    jsPlumb.addEndpoint('#box_id', { uuid: $('#box_id_source2' }, {isSource: true,isTarget: false});
    jsPlumb.addEndpoint('#box_id', { uuid: $('#box_id_source3' }, {isSource: true,isTarget: false});
    jsPlumb.addEndpoint('#box_id', { uuid: $('#box_id_target1' }, {isSource: false,isTarget: true});

现在您已经为endpoint分配了UUID。从JSON下载laoding后，将很容易在它们之间建立连接：

jsPlumb.connect({uuids: ['#box_id_source1', '#box_id_target1']});

希望这能帮到你或者给你个主意