Drawing a connecting line between two elements

Question

How can I (or what tools are available) draw a line between two or more elements to connect them? Any combination of HTML / CSS / JavaScript / SVG / Canvas will do.

If your answer supports any of them, mention it:

• draggable items
• draggable / editable connections
• preventing overlapping elements

This question has been updated to combine numerous variations of this.

Answer 1

jsPlumb is an available option that supports drag and drop, as seen in numerous demos , including a demo of flowcharts .

It is available in the free version of Community and the paid version of Toolkit.

The Toolkit edition includes the Community edition with a comprehensive level of data binding, as well as several user interface widgets for creating applications and integrations for popular libraries and has a commercial license.

Answer 2

Combining strings with svgs was worth a try, and it worked fine ... First of all, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behavior are defined in XML text files. You can create SVG in HTML using the <svg> . Adobe Illustrator is one of the best programs used to create complex svgs using paths.

Procedure for combining two divs using a string:

1. create two div elements and assign them any position you need

    <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div> <div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div> 

   (for clarification, I do some inline styles, but it is always useful to create a separate CSS file for styling)

2. <svg><line id="line1"/></svg>

   The Line tag allows us to draw a line between the two specified points (x1, y1) and (x2, y2). (for an evaluation visit to w3schools.) we have not yet indicated them. because we will use jQuery to edit the attributes (x1, y1, x2, y2) of the string tag.

3. in the <script> write

    line1 = $('#line1'); div1 = $('#div1'); div2 = $('#div2'); 

   I used selectors to select two div elements and a row ...

    var pos1 = div1.position(); var pos2 = div2.position(); 

   The jQuery position() method allows us to get the current position of the element. For more information, visit https://api.jquery.com/position/ (you can also use the offset() method)

Now that we have all the positions we need, we can draw a line as follows ...

 line1 .attr('x1', pos1.left) .attr('y1', pos1.top) .attr('x2', pos2.left) .attr('y2', pos2.top); 

The jQuery .attr() method is used to change the attributes of the selected item.

All that we did in the line above, we changed the attributes of the line from

 x1 = 0 y1 = 0 x2 = 0 y2 = 0 

at

 x1 = pos1.left y1 = pos1.top x2 = pos2.left y2 = pos2.top 

since position() returns two values, one “left” and the other “top”, we can easily access them using .top and .left using objects (here pos1 and pos2) ...

The line tag now has two different coordinates for drawing a line between two points.

Hint: add event listeners as needed in divs

Tip: make sure you import the jQuery library before writing anything in the script tag

After adding coordinates via jQuery ... it will look something like this

The following snippet is for demonstration purposes only. To get the right solution, follow the instructions above.

.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div> <div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div> <svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg> 

Answer 3

I also had the same requirement a few days ago

I used the full width and height of svg and added it below all my div elements and added lines to these svg dynamically.

Find out how I did it using svg

HTML

 <div id="ui-browser"><div class="anchor"></div> <div id="control-library" class="library"> <div class="name-title">Control Library</div> <ul> <li>Control A</li> <li>Control B</li> <li>Control C</li> <li>Control D</li> </ul> </div><!-- --></div><!-- --><div id="canvas"> <svg id='connector_canvas'></svg> <div class="ui-item item-1"><div class="con_anchor"></div></div> <div class="ui-item item-2"><div class="con_anchor"></div></div> <div class="ui-item item-3"><div class="con_anchor"></div></div> <div class="ui-item item-1"><div class="con_anchor"></div></div> <div class="ui-item item-2"><div class="con_anchor"></div></div> <div class="ui-item item-3"><div class="con_anchor"></div></div> </div><!-- --><div id="property-browser"></div> 

https://jsfiddle.net/kgfamo4b/

  $('.anchor').on('click',function(){ var width = parseInt($(this).parent().css('width')); if(width==10){ $(this).parent().css('width','20%'); $('#canvas').css('width','60%'); }else{ $(this).parent().css('width','10px'); $('#canvas').css('width','calc( 80% - 10px)'); } }); $('.ui-item').draggable({ drag: function( event, ui ) { var lines = $(this).data('lines'); var con_item =$(this).data('connected-item'); var con_lines = $(this).data('connected-lines'); if(lines) { lines.forEach(function(line,id){ $(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1); }.bind(this)); } if(con_lines){ con_lines.forEach(function(con_line,id){ $(con_line).attr('x2',$(this).position().left) .attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5)); }.bind(this)); } } }); $('.ui-item').droppable({ accept: '.con_anchor', drop: function(event,ui){ var item = ui.draggable.closest('.ui-item'); $(this).data('connected-item',item); ui.draggable.css({top:-2,left:-2}); item.data('lines').push(item.data('line')); if($(this).data('connected-lines')){ $(this).data('connected-lines').push(item.data('line')); var y2_ = parseInt(item.data('line').attr('y2')); item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5); }else $(this).data('connected-lines',[item.data('line')]); item.data('line',null); console.log('dropped'); } }); $('.con_anchor').draggable({drag: function( event, ui ) { var _end = $(event.target).parent().position(); var end = $(event.target).position(); if(_end&&end) $(event.target).parent().data('line') .attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2); },stop: function(event,ui) { if(!ui.helper.closest('.ui-item').data('line')) return; ui.helper.css({top:-2,left:-2}); ui.helper.closest('.ui-item').data('line').remove(); ui.helper.closest('.ui-item').data('line',null); console.log('stopped'); } }); $('.con_anchor').on('mousedown',function(e){ var cur_ui_item = $(this).closest('.ui-item'); var connector = $('#connector_canvas'); var cur_con; if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]); if(!$(cur_ui_item).data('line')){ cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line')); cur_ui_item.data('line',cur_con); } else cur_con = cur_ui_item.data('line'); connector.append(cur_con); var start = cur_ui_item.position(); cur_con.attr('x1',start.left).attr('y1',start.top+1); cur_con.attr('x2',start.left+1).attr('y2',start.top+1); }); 

Answer 4

VisJS supports this with the example of arrows , which supports drag and drop items.

It also supports editable connections with its Interaction Events example.

Answer 5

Raphaël supports this with the Graffle example.

This answer is based off of Awais Akhtar answer , and Vaibhav Jain answer .

Answer 6

D3 contains hundreds of examples , some of which are suitable for this issue.

Non-drag examples that are fixed:

• https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram
• https://beta.observablehq.com/@mbostock/d3-tidy-tree
• https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling
• https://beta.observablehq.com/@mbostock/d3-radial-dendrogram
• https://beta.observablehq.com/@mbostock/d3-sankey-diagram
• https://www.jasondavies.com/collatz-graph/
• https://bost.ocks.org/mike/hive/
• https://bost.ocks.org/mike/fisheye/
• https://bl.ocks.org/wvengen/cab9b01816490edb7083

Non-drag examples that are interactive:

• https://beta.observablehq.com/@mbostock/collapsible-tree
• https://beta.observablehq.com/@mbostock/d3-force-directed-graph

Drag and drop examples:

• http://bl.ocks.org/MoritzStefaner/1377729
• http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779

This answer is based off of Glenn Dayton answer .

Answer 7

mxGraph - used by draw.io - supports this use case with the Grapheditor example. Documentation. Examples.

This answer is based off of Vainbhav Jain answer .

Answer 8

Cytoscape supports this with its sample architecture , which supports drag and drop.

To create connections, there is an extension edgehandles . It does not yet support editing existing connections. Question.

For editing connection forms, there is an extension for editing edges . Demo.

The edit-editation extension looks promising, but there is no demo yet.

Answer 9

GoJS supports this with an example state diagram that supports drag and drop of elements and editing connections.

This answer is based on Walter Northwoods answer .

Answer 10

JointJS / Rappid supports this use case with its Kitchensink example, which supports drag and drop and relocation of joints. He has many examples.

This answer is based off of Vainbhav Jain answer .

Answer 11

js-graph.it supports this use case, as seen in the getting started guide that supports dragging and dropping elements without overlapping connections. It doesn't seem to support editing / creating connections. This seems to be no longer supported.