javascript - 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';

只能在一个框的源和另一个框的目标之间建立连接。目标 anchor 是 Continuous。

就使用框和拖放连接而言，这种安排非常适合我的需要。

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

我尝试使用保存的 uuid 重新连接，但事实证明在创建连接之前端点尚不存在。我尝试的另一种方法是仅连接源框和目标框 ID:

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

但这永远不会将正确的源连接到目标，并且连接与用户进行的连接并不完全相同。例如，如果连接从源 1 开始，使用此方法它可以从源 3 开始。

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

那么在这些情况下是否可以重新创建连接，还是我应该寻找其他解决方案？

谢谢。

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

Answer 1

尝试将 uuid 分配给您的端点。

    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});

现在您已经为端点分配了 uuid。从 JSON 加载后很容易在它们之间建立连接:

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

希望这对你有帮助或给你一个想法