获取 Elements 的连接信息

Question

我正在使用 jsPlumb 和 Javascript 来实现一个简单的元素拖放界面，其中可以相互建立连接。我想知道当单击每个已放置元素上的“类似设置”按钮时，如何获取源和目标的连接详细信息。

在上面的画布中，如果点击“空查询”的设置图标，我需要检索连接信息这样的

连接器内：

源 id - 在连接器 id 本身和目标 id-“皮克斯”元素的连接器 id

输出连接器：

源 id - 输出连接器 id 本身和目标 id-“派拉蒙”元素的连接器 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。 要获取有关连接的信息，您应该使用指定的target 调用它：

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

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

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

8-out 是您的来源的 ID。

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

更多详情请见jsPlumb help。