在jsPlumb中将数组用作目标

Question

I am trying to create connections in jsPlumb from one source to multiple targets. I want to define the targets using an array. However, whenever I try to do this jsPlumb always simply chooses the first item in the array, rather than using all of them.

For example, I define my array like so using the id's of two elements:

var test = ['s4', 's3'];

Then, the jsPlumb to create the programmatic connection:

    jsPlumb.ready(function() {


    jsPlumb.connect({

        source:"element1", 
        target: test,
        anchors:["Left", "Left" ],
        endpoint:"Blank", /* note that you can also make this "image" if you want something fancy */
        endpointStyle:{ fillStyle: "red"},
        paintStyle:{strokeStyle:"red", lineWidth:3},
        connector:[ "Flowchart", { cornerRadius:"200", stub:"40"} ] 

    });


})

This only ever creates a connection between #element1 and #s4. What am I getting wrong? I can't find much documentation on how to use an array in the context of a programmatic connection.

Answer 1

Try to loop your code for multiple targets like below:

var start = 'element1';
var end = ['s4','s3'];    

for(var i=0;i<end.length;i++)
{
        jsPlumb.connect({
                source:start,
                target:end[i],
                connector:[ "Flowchart", { cornerRadius:"200", stub:"40"} ],
                paintStyle:{strokeStyle:"red", lineWidth:3},
                endpointStyle:{ fillStyle: "red"},
                anchors:["Left", "Left" ],
                endpoint:"Blank"
        })
}

Similar question: How can I connect multiple targets from a single source?

Answer 2

As stated in the docs, you can't pass an array in the target field of .connect method.

DOCS - http://jsplumbtoolkit.com/apidocs/classes/jsPlumbInstance.html#method_connect

For connecting the same source to multiple targets, just use the .connect method multiple times with different target everytime.

If you want to limit the number of connections which can be made from a single endpoint (unlimited by default), then you can use the maxConnections property - http://jsplumbtoolkit.com/apidocs/classes/jsPlumbInstance.html#method_makeTarget