Question

I have a two divs, Div1 and Div2, I want to draw two lines like Div1 to Div2 and Div2 to Div1. I am using jsPlumb for jquery to draw the connector. It draws only one line with arrow indicating it is bidirectional. The requirement is to show two different lines. Is there any way to do that in jsPlumb?

Answer 1

it sounds like you’re using the same Anchor point for both connections, so the two connections are being painted on top of each other.

up to jsPlumb 1.3.3 the way to get around this is to explicitly set different anchor points, something like this:

jsPlumb.connect( { source:"div1", target:"div2", anchors:["BottomLeft", "TopLeft"] });
jsPlumb.connect( { source:"div2", target:"div1", anchors:["BottomRight", "TopRight"] });

(If you’re using jsPlumb.addEndpoint the same principle applies).

In version 1.3.4 I will be releasing “Continuous” anchors, which are anchors that ensure they get their own location on each element, and were designed specifically for the issue you’re having, because setting everything up like that example above gets boring quickly.

1.3.4 should be released in about a week from now.