StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>you can use jsplumb library to achieve this. if you have two divs, div1 and div2, </p> <pre><code>var endpointOptions = { isSource:true, isTarget:true }; var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions ); var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions ); jsPlumb.connect({ source:div1Endpoint, target:div2Endpoint, connector: [ "Bezier", 175 ], paintStyle:{ lineWidth:5, strokeStyle:'red' } }); </code></pre> <p>this should establish the connectors. if your divs are movables, then onmove, make a call to jsPlumb.repaint()</p> <p>Link to jsPlumb demo - <a href="https://jsplumbtoolkit.com" rel="nofollow noreferrer">https://jsplumbtoolkit.com</a> Jsplumb seems to have become paid now, (revised link above). However they do have a <a href="https://jsplumbtoolkit.com/lib/jsplumb.js" rel="nofollow noreferrer">Community Edition</a> </p> <p><strong>Community Edition</strong> This is the open source jsPlumb project hosted on GitHub that was first created in early 2010. It is a view layer technology that provides you with an API to establish connectivity between DOM elements, both programmatically and via mouse/touch events.</p> <p>The Community Edition is free, and is licensed with an MIT or GPL2 license; you choose whichever suits your needs.</p> <p><strong>Toolkit Edition</strong> The Toolkit Edition wraps the Community edition with a focus on the underlying data model, as well as several useful UI features such as layouts, and a widget that offers pan/zoom functionality. It provides a fast way of building applications with visual connectivity at their core. To get a better feel for the capabilities of the Toolkit Edition, take a look through some of the demos or peruse the documentation.</p> <p>The Toolkit Edition has a commercial, per-developer, license with optional access to email support (plus updates to new released versions for a year). License terms are available here. Feel free to jump in and buy a license right now using this form!</p> <p>Roadmaps for both editions can be viewed <a href="https://jsplumbtoolkit.com/roadmap.html" rel="nofollow noreferrer">here</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload