JS Library Which Allows To Visually Connect Elements

jqSimpleConnect is a lightweight JavaScript library that provides functionality for visually linking elements in a web page. It uses <div> elements to draw connectors, to avoid dependencies with SVG and Canvas, and to be much faster and simpler.

Its only requirement is jQuery, another JavaScript library, which must be included in the web page with jqSimpleConnect.

jquery connections js, jquery plugin to connect two html elements with a line, draw responsive line between two divs

How to make use of it:

1. Add the jQuery library and jqSimpleConnect jQuery plugin to your HTML page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jqSimpleConnect.min.js"></script>

2. Use JavaScript to draw a virtual line connecting the #el-a #el-b block elements.

<div id="el-a">Element A</div>
<div id="el-b">Element B</div>

jqSimpleConnect.connect("#el-a", "#el-b", {/*OPTIONS*/});

3. Parameters and options.

// elementA: A CSS selector or a jQuery's object for select the first element.
// elementB: A CSS selector or a jQuery's object for select the second element.
jqSimpleConnect.connect(elementA, elementB, {

  // the color of the line
  color: 'green',

  // the width of the line
  radius: 10,

  // a boolean indicating if the corners must be round
  roundedCorners: true,

  // the anchor type of the first element
  anchorA: 'horizontal'

  // the anchor type of the second element
  anchorB: 'vertical'
  
});

4. API.

// Repaints an specific connection from the page.
// connectionId: The connection's unique identifier.
// Returns true if the connection was repainted or false if no connection with that identifier was found.
jqSimpleConnect.repaintConnection = function(connectionId)

// Repaints all the connections in the page.
jqSimpleConnect.repaintAll = function()

// Removes an specific connection from the page.
// Returns true if the connection was removed or false if no connection with that identifier was found.
jqSimpleConnect.removeConnection = function(connectionId)

// Removes all the connections in the page.
jqSimpleConnect.removeAll = function()

visualize connections using jquery, jqSimpleConnect Plugin/Github, jquery connect plugin example, connect divs with lines jquery, jquery connections example