连接分离后 JSPlumb 重新创建连接答案

【问题标题】：JSPlumb Re-Create Connection after Connection detach连接分离后 JSPlumb 重新创建连接
【发布时间】：2016-11-02 15:58:15
【问题描述】：

我有可以拖放到绘图区域的 div。可以使用鼠标从源端点拖放到目标端点手动连接这些 div。在如此创建的连接上碰撞时，连接会被分离，但端点仍然存在，并且可以通过上述相同的手动过程重新创建已删除的连接。现在我还将以 json 格式的连接节点流程图的形式保存到磁盘文件中。在加载文件时，会创建完美的流程图，显示所有连接和节点。现在我在单击一个节点时删除了一个连接，它可以工作。但现在我无法再次重新创建相同的连接。旧节点端点变得无响应。这是我的加载函数：-

function 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 Google 组、JSplumb API Docs 以及谷歌抛出的大多数相关链接，但找不到任何帮助。请帮忙。

【问题讨论】：

这和jQuery UI有关系吗？
不，它与 jQuery UI 无关。我描述的问题纯粹是一个 jsPlumb 问题。
那么请不要使用标签。这浪费了关注jquery-ui的人的时间

标签： javascript jquery jsplumb

【解决方案1】：

朋友们，
经过一些研究，我发现我的错误实际上是我不知道的。我试图在两个节点之间建立连接，这两个节点没有通过调用 jsPlumb.addEndpoint() 附加端点。当您不使用此函数附加端点时，无法将 UUID 设置为端点，因此无法从它们先前已附加的预先存在的端点连接这些节点。因此故事的寓意是，您需要将端点附加到特定位置的节点，然后为它们设置 UUID，然后使用 uuid 连接节点，否则它不起作用。请参阅 API 文档以了解有关 jsPlumb.addEndpoint() 和 jsPlumb.connect({ uuids:[ep_1.getUuid(),ep_2.getUuid()] }) 函数的更多信息。这些是我认为最重要的一次。希望这对所有面临同样问题的人有所帮助。

【讨论】：