JsPlumb - Basic setup advice

Question

I've never used jsplumb before and I have read some of the documentation and looked at the demos, but I still don't understand..

I want to create a DIV like this :

One Input and upto 8 outputs (this value may change) How do I do this ?

I will be looking at cloning this div and incrementing the divs ID, so I could end up with two or more divs that need to be able to join like this.

Can anyone help with this or point me to some simple examples..

Thanks

Answer 1

You need to add the bigger div as a target endpoint and the smaller div's as source end point.

 var e1 =  jsPlumb.addEndpoint(idSource, sourceEndpoint);
        var e2 =  jsPlumb.addEndpoint(idTarget, targetEndpoint);

where sourceEndpoint and targetEndpoints are objects with definitions for how the endpoint will look and behave .

Have a look at one of the examples to get the behaviour you desire. jsPlumb should then allow you to drag and drop connections from source to targets. The state machine demo does almost the same thing as what you need.

http://www.jsplumb.org/demo/flowchart/dom.html