Question

可以请任何人帮我解决如何存储和加载连接，以及锚定位置jsplumb和anjular js。

请检查下面的图片链接（http://i.stack.imgur.com/YC1PR.jpg）。

第一个是没有连接的图像，第二个是连接的图像。

当我重新加载页面时，我仍然需要在同一个地方获得连接

Answer 1

每当建立连接时，都会触发“连接”（SOURCE）事件。您需要在该触发的函数中存储连接端点详细信息，以便以后可以检索它们。

首先确保为端点设置了正确的ID。您可以在创建端点时手动设置为：

var e0 = jsPlumb.addEndpoint("div1",{uuid:"div1_ep1"}),  // You can also set uuid based on element it is placed on
 e1 = jsPlumb.addEndpoint("div2",{uuid:"div2_ep1"});

现在绑定连接事件，您将在其中存储已建立的连接信息：

var uuid, index=0; // Array to store the endpoint sets.
jsPlumb.bind("connection", function(ci) {
    var eps = ci.connection.endpoints;
    console.log(eps[0].getUuid() +"->"+ eps[1].getUuid()); // store this information in 2d-Array or any other format you wish
    uuid[index][0]=eps[0].getUuid(); // source endpoint id
    uuid[index++][1]=eps[1].getUuid(); // target endpoint id
    }
});

您可以将阵列信息转换为JSON格式并存储在服务器端。刷新页面时，您需要检索JSON数据并恢复连接。要根据uuid连接端点，请使用：

jsPlumb.connect({ uuids:["div1_ep1","div2_ep1"] });

以下是基于端点建立连接的jsFiddle。

如何存储和加载jsplumb的连接（使用AngularJS和jsPlumb）

1 个答案: