获取Elements的连接信息

Question

我正在使用jsPlumb和Javascript来实现一个简单的拖放元素接口，可以在这些接口之间建立连接。我想知道如何在“设置”之类的情况下获取源和目标的连接详细信息。单击每个掉落元素上的按钮。

在上面的画布中，如果＆＃34;空查询＆＃34;的设置图标单击，我需要检索连接信息

in-connector：

来源ID - 在连接器ID本身＆amp;目标id-＆＃34;皮克斯＆＃34;元素的连接器ID

out-connector：

源ID - 输出连接器ID本身＆amp;目标id-＆＃34;派拉蒙＆＃34;元素的连接器ID

JS功能

function dropCompleteQueryElement(newAgent,i,e)
{
    $(droppedElement).draggable({containment: "container"});

    var finalElement =  newAgent;
    r++; q++;

    var connectionIn = $('<div class="connectorIn">').attr('id', i + '-in').addClass('connection').text("in");
    var connectionOut = $('<div class="connectorOut">').attr('id', i + '-out').addClass('connection').text('out');

    finalElement.css({
        'top': e.pageY,
        'left': e.pageX
    });

    finalElement.append(connectionIn);
    finalElement.append(connectionOut);

    $('#container').append(finalElement);

    jsPlumb.draggable(finalElement, {
        containment: 'parent'
    });

    jsPlumb.makeTarget(connectionIn, {
        anchor: 'Continuous'
    });

    jsPlumb.makeSource(connectionOut, {
        parent:finalElement,
        anchor: 'Continuous'
    });

    var myNode = document.getElementById("lot");
    var fc = myNode.firstChild;

    while( fc ) {
        myNode.removeChild( fc );
        fc = myNode.firstChild;
    }

}

newAgent是在附加图标和标签之前从工具箱拖动的元素，而finalElement是放在画布上的元素。

Answer 1

不确定我是否理解正确。如果您想获得有关连接的信息，则必须致电jsPlumb.getConnections。 要获取有关in-connection的信息，您应该使用指定的target来调用它：

jsPlumb.getConnections({ target:"8-in" });

其中8-in是您的目标的ID。要获取有关外部连接的信息，您应该使用指定的source来调用它：

jsPlumb.getConnections({ source:"8-out" });

其中8-out是您的来源的ID。

返回值是一个连接列表，每个连接都是一个包含所需信息的对象connection.sourceId，connection.targetId。

有关详细信息，请参阅jsPlumb help。