2

如果我有多个可以连接在一起的盒子，我正在用 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';

只能在一个盒子的源和另一个盒子的目标之间建立连接。目标锚是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

4

1 回答 1

0

尝试将 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']});

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

于 2018-08-01T13:39:26.437 回答