1

I'm working with jsPlumb and Javascript to implement a simple drag and drop interface of elements where connections can be made amongst each other. I would like to know how I could get the connection details of the sources and the targets when the 'setting-like' button on each dropped element is clicked.

settings btn

In the above canvas, if the settings icon of the "Empty Query" is clicked, I need to retrieve the connection info such

in-connector:

source id - in connector id itself & target id- "Pixar" element's connector id

out-connector:

source id - out connector id itself & target id- "Paramount" element's connector id

JS Function

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 is the element dragged from the and the toolbox before the icons and labels are appended and the finalElement is the element dropped on the canvas.

Nayantara Jeyaraj
  • 2,624
  • 7
  • 34
  • 63

1 Answers1

2

Not sure I understood you correctly. If you want to get information about connection, you have to call jsPlumb.getConnections. To get information about in-connection you should call it with target specified:

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

where 8-in is id of your target. To get information about out-connections you should call it with source specified:

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

where 8-out is id of your source.

Return value is an list of connections, each connection is an object with required information connection.sourceId, connection.targetId.

See jsPlumb help for more details.

Alena Kastsiukavets
  • 812
  • 6
  • 9