Search code examples
javascriptjquerypluginsjsplumb

Avoid overlaying of connections and elements in jsPlumb

I'm using jsPlumb to create connection between elements in the page and I'm having troubles because the created connections overlay some elements on the site.

My connections are created dynamically so I can not predict the way they should look. I just want to avoid overlapping when necessary.

I've changed the z-index property of the overlayed elements and the connection is showed behind them.

enter image description here

However, what I'm looking for is to create the connection in a way that it doesn't goes through those elements in my site.

I'm looking for something like this:

enter image description here

Is that possible with jsPlumb? Thanks.

Solution

  • Yes, it is possible with anchor option(SOURCE). For your requirement set anchor:Top. Example:

    jsPlumb.connect({...., anchor:"Top", ... });

    JsFiddle