JSPlumb连接分离后重新创建连接
JSPlumb Re-Create Connection after Connection detach
我有div可以拖放到绘图区域。这些div可以使用鼠标从源端点拖放到目标端点手动连接。在链接连接时,这样创建的连接将被分离,但端点仍然存在,并且可以通过上述相同的手动过程重新创建已删除的连接。现在我也保存在json格式的连接节点流程图的形式的绘图到磁盘文件。加载文件后,流程图完美地显示了所有连接和节点。现在我在单击节点时删除了一个连接,它可以工作。但现在我无法再创造同样的联系了。旧节点端点已变得无响应。这是我的加载函数:-
函数loadDrawing(jsPlumb, clientName, fileName) {
var compositeObject = [ clientName.toString() , fileName.toString() ];
$.ajax({
type: "post",
url: contextPath+"/file/load",
beforeSend: function(xhr) {
xhr.setRequestHeader( "Content-type", "application/json" );
},
// Send client and file name to the server
data : JSON.stringify(compositeObject),
async:false,
cache: false,
contentType: false,
success: function(response){
var nodes = response.nodes;
var endpoints = response.endpoints;
var connections1 = response.connections;
$.each(nodes, function( index, elem ) {
createElement( jsPlumb, elem.cssClass , elem.blockId , elem.nodetype ,
elem.dropStatus , elem.positionX, elem.positionY , elem.html, connections1["anchors"] );
});
var connections = response.connections;
$.each(connections, function( index, elem ) {
var connection1 = jsPlumb.connect({
source: elem.pageSourceId,
target: elem.pageTargetId,
reattach: true,
anchors: elem.anchors,
endpoint:"Rectangle",
maxConnections:-1, // Unlimited Connections .
deleteEndpointsOnDetach:false,// Do not delete endpoints on connection removal.
paintStyle:{ width:10 , height:10, strokeStyle:'#666' },
isSource:true,
connector: 'Flowchart' ,
connectorStyle : { strokeStyle:"#666" },
isTarget:true
});
});
// Reset global node counters
countLLC = response.counters[0].countLLC;
countCCorp = response.counters[0].countCCorp;
countSCorp = response.counters[0].countSCorp;
countNonProfit = response.counters[0].countNonProfit;
countSeries = response.counters[0].countSeries;
countLivingTrust = response.counters[0].countLivingTrust;
countLandTrust = response.counters[0].countLandTrust;
countQRP = response.counters[0].countQRP;
countLP = response.counters[0].countLP;
wealthPlanningItemId = response.counters[0].countWPBNode;
// Display detached captions
for ( i=0 ; i<response.labelId.length ; i++) {
var detachedCaptionDiv = $('<div>').attr('id',response.labelId[i].labelId)
.html(response.labelContent[i].content);
$('#nodeCaptionContainer1').append(detachedCaptionDiv);
}
alert("Image Open Successful .");
},
error: function(){
alert("Image Open Failure");
}
});
}
// Re-create nodes
function createElement( jsPlumb , cssClass , nodeId , nodetype , dropStatus , posX, posY , content, anchor1 ) {
var recreatedNode = $('<div>').attr('id',nodeId).html( content );
recreatedNode.attr('title', nodetype );
recreatedNode.attr('dropstatus', dropStatus );
recreatedNode.attr('class', cssClass );
recreatedNode.css('position', 'absolute');
recreatedNode.css('left', posX+'px');
recreatedNode.css('top', posY+'px');
// Make nodes and their endpoints non-detachable
$(recreatedNode).removeClass("ui-draggable");
jsPlumb.draggable($(recreatedNode));
$("#content1").append(recreatedNode);
}
这是我的连接删除代码:-
jsPlumb.bind('click', function (connection, e) {
jsPlumb.detach(connection);
});
我已经搜索了SOF, JSplumb谷歌组,JSplumb API文档,以及谷歌抛出的大多数相关链接,但无法找到任何帮助。请帮忙。
朋友们好,
经过一番研究,我发现我的错误实际上是我不知道的。我试图在两个节点之间绘制连接,这些节点没有通过调用jsplump . addendpoint()附加端点。如果不使用此函数附加端点,则不可能将uid设置到端点,因此不可能从先前附加的已有端点连接这些节点。因此,这个故事的寓意是,您需要将端点附加到特定位置的节点上,然后为它们设置uuid,然后使用uuid连接节点,否则它将不起作用。请参阅API文档了解更多关于jsPlumb. addendpoint()和jsPlumb的信息。connect({uuid:[ep_1.getUuid(),ep_2.getUuid()]}) functions。这些是我认为最重要的。希望这能帮助所有面临同样问题的人。
相关文章:
- 将字符串与integer连接,用作jquery中的变量(创建动态变量)
- Socket.IO和AngularJS创建多个连接,如何停止
- Strophe.js MUC:创建一个房间并连接多个房间
- JQuery-创建元素并将其连接到其他html
- 如何在同一个网页上创建两个连接列表
- Jquery幻灯片中的列表,连接第一个和最后一个列表元素以创建旋转木马
- 在可连接的元素内创建一个不可编辑的块
- 使用 JScript 在 global.asa 中创建数据库连接
- 保存动态创建的 jQuery 连接可排序列表的顺序
- Javascript:创建循环以连接选中复选框的结果
- 是否可以从浏览器创建与 redis 服务器的连接
- 在 Node 中,创建具有“等待连接”超时的 http 连接的好方法是什么
- 尝试将动态创建的带有选项的选择元素(标记)连接到动态创建的表行
- 如何使用 DOM 而不是在 HTML 连接上创建包含格式化项的列表
- 为什么,在javascript画布动画上创建多个对象后,它们已连接
- 如何将javascript对象连接到函数内动态创建的html元素
- 创建我的第一个移动应用程序并将其连接到数据库
- Mongoose创建测试数据并在没有数据库连接的情况下进行填充
- 为什么websocket连接创建不通过http
- 如何在运行时通过字符串连接创建函数或对象属性名称