Question

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

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

每个源都由filter属性区分，该属性将它连接到盒子的不同部分：

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

只能在一个盒子的来源和另一个盒子的目标之间建立连接。目标锚点为Continuous。

这种安排非常适用于我需要的工具箱和拖放连接。

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

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

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

但是这从未将正确的源连接到目标，并且连接与用户创建的连接不完全相同。如果从源1开始连接，则可以使用此方法从源3开始。

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

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

感谢。

注意： 您可以在此处找到有关用户界面，其设置和问题的更多信息：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']});

希望这可以帮助您或为您提供一个想法

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

1 个答案: