Search code examples
javascriptjqueryjsplumb

How can I connect multiple endpoints from a single startpoint?


The code below enables me to connect one startpoint to either endpoint A or endpoint B, but not both! Could anybody help me to modify this so it's possible to link to both endpoints?
Here's a fiddle to illustrate my point ))

$(function() {

    jsPlumb.ready(function() {
        var jsp = jsPlumb.getInstance();
        jsp.draggable($("#start"));
        jsp.draggable($("#end_A"));
        jsp.draggable($("#end_B"));

        var endpoint = jsp.addEndpoint($("#start"), {
            isSource:true
        });

        jsp.addEndpoint($("#end_A"), {
            isTarget:true
        }); 

        var endpoint = jsp.addEndpoint($("#start"), {
            isSource:true
        });

        jsp.addEndpoint($("#end_B"), {
            isTarget:true
        }); 

        $("#dragbutton").bind("mousedown", function(e) {

            $(document).bind("mousemove.adjust", function(e) {

                var left = e.offsetX;
                var top = e.offsetY;
                $(endpoint.canvas).css({"left":left, "top":top});
                $(document).unbind("mousemove.adjust");
            });

            $(endpoint.canvas).trigger(e)
        })           

    })       

})

Solution

  • Use the maxConnections property.

    maxConnections: -1 // unlimited connections
    maxConnections: 1 // only one connection