Draw a connecting line between two elements

Question

How can I draw a line between two or more elements to connect them  Any combination of HTML CSS JavaScript SVG Canvas is fine  If your answer supports any of these  then do mention it   draggable elements draggable editable connections element overlap avoidance   This question has been updated to consolidate the numerous variations of it

User · Answer

JointJS Rappid supports this use case with its Kitchensink example which supports dragging and dropping of elements  and repositioning of connections  It has many examples      This answer is based off of Vainbhav Jain s answer

User · Answer

I also had the same requirement few days back  I used an full width and height svg and  added it below all my divs and added lines to these svg dynamically   Checkout the how I did it here using svg   HTML   lt div id  ui-browser  gt  lt div class  anchor  gt  lt  div gt        lt div id  control-library  class  library  gt          lt div class  name-title  gt Control Library lt  div gt          lt ul gt            lt li gt Control A lt  li gt            lt li gt Control B lt  li gt            lt li gt Control C lt  li gt            lt li gt Control D lt  li gt          lt  ul gt        lt  div gt  lt  -- -- gt  lt  div gt  lt  -- -- gt  lt div id  canvas  gt        lt svg id  connector canvas  gt  lt  svg gt        lt div class  ui-item item-1  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt        lt div class  ui-item item-2  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt        lt div class  ui-item item-3  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt        lt div class  ui-item item-1  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt        lt div class  ui-item item-2  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt        lt div class  ui-item item-3  gt  lt div class  con anchor  gt  lt  div gt  lt  div gt      lt  div gt  lt  -- -- gt  lt div id  property-browser  gt  lt  div gt    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 amp  amp 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

User · Answer

mxGraph     used by draw io     supports this use case  with its Grapheditor example  Documentation  Examples      This answer is based off of Vainbhav Jain s answer

User · Answer

Recently  I have tried to develop a simple web app that uses drag and drop components and has lines connecting them  I came across these two simple and amazing javascript libraries   Plain Draggable  simple and high performance library to allow HTML SVG element to be dragged  Leader Line  Draw a leader line in your web page  Working example link  usage  click on add scene to create a draggable  click on add choice to draw a leader line between two different draggables

User · Answer

Cytoscape supports this with its Architecture example which supports dragging elements   For creating connections  there is the edgehandles extension  It does not yet support editing existing connections  Question   For editing connection shapes  there is the edge-editing extension  Demo   The edit-editation extension seems promising  however there is no demo yet

User · Answer

js-graph it supports this use case  as seen by its getting started guide  supporting dragging elements without connection overlaps  Doesn t seem like it supports editing creating connections  Doesn t seem it is maintained anymore

User · Answer

GoJS supports this  with its State Chart example  that supports dragging and dropping of elements  and editing of connections      This answer is based off of Walter Northwoods  answer

User · Answer

Joining lines with svgs was worth a shot for me  and it worked perfectly    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 behaviors are defined in XML text files  you can create an svg in HTML using  lt svg gt  tag  Adobe Illustrator is one of the best software used to create an complex svgs using paths   Procedure to join two divs using a line     create two divs and give them any position as you need   lt div id  div1  style  width  100px  height  100px  top 0  left 0  background  e53935   position absolute   gt  lt  div gt   lt div id  div2  style  width  100px  height  100px  top 0  left 300px  background  4527a0   position absolute   gt  lt  div gt     for the sake of explanation I am doing some inline styling but it is always good to make a separate css file for styling   lt svg gt  lt line id  line1   gt  lt  svg gt   Line tag allows us to draw a line between two specified points x1 y1  and  x2 y2    for a reference visit w3schools   we haven t specified them yet  because we will be using jQuery to edit the attributes  x1 y1 x2 y2  of line tag  in  lt script gt  tag write  line1       line1       div1       div1       div2       div2      I used selectors to select the two divs and line     var pos1   div1 position    var pos2   div2 position      jQuery position   method allows us to obtain the current position of an element  For more information  visit https   api jquery com position   you can use offset   method too    Now as we have obtained all the positions we need we can draw line as follows     line1    attr  x1   pos1 left     attr  y1   pos1 top     attr  x2   pos2 left     attr  y2   pos2 top     jQuery  attr   method is used to change attributes of the selected element    All we did in above line is we changed attributes of line from   x1   0 y1   0 x2   0 y2   0   to  x1   pos1 left y1   pos1 top x2   pos2 left y2   pos2 top   as position   returns two values  one  left  and other  top   we can easily access them using  top and  left using the objects  here pos1 and pos2        Now line tag has two distinct co-ordinates to draw line between two points   Tip  add event listeners as you need to divs  Tip   make sure you import jQuery library first before writing anything in script tag   After adding co-ordinates through JQuery     It will look something like this  Following snippet is for demonstration purpose only  please follow steps above to get correct solution   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  div1  style  width  100px  height  100px  top 0  left 0  background  e53935   position absolute   gt  lt  div gt  x000D   lt div id  div2  style  width  100px  height  100px  top 0  left 300px  background  4527a0   position absolute   gt  lt  div gt  x000D   lt svg width  500  height  500  gt  lt line x1  50  y1  50  x2  350  y2  50  stroke  red   gt  lt  svg gt  x000D   x000D   x000D

User · Answer

Rapha  l supports this  with its Graffle example      This answer is based off of Awais Akhtar s answer  and Vaibhav Jain s answer

User · Answer

D3 has hundreds of examples  some of which are suitable for this question   Examples without drag and drop  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   Examples without drag and drop  that are interactive    https   beta observablehq com  mbostock collapsible-tree https   beta observablehq com  mbostock d3-force-directed-graph   Examples with dragging and dropping    http   bl ocks org MoritzStefaner 1377729 http   bl ocks org Neilos 584b9a5d44d5fe00f779      This answer is based off of Glenn Dayton s answer

User · Answer

jsPlumb is an option available that supports drag and drop  as seen by its numerous demos  including the Flowchart demo   It is available in a free Community edition  and a paid Toolkit edition      The Toolkit edition wraps the Community edition with a comprehensive data binding layer  as well as several UI widgets for building applications and integrations for popular libraries  and is commercially licensed

User · Answer

VisJS supports this with its Arrows example  that supports draggable elements   It also supports editable connections  with its Interaction Events example

[javascript] Draw a connecting line between two elements

Examples related to javascript

Examples related to html

Examples related to connection

Examples related to line

Examples related to jquery-ui-draggable