Draw a line connecting two clicked div columns

Question

I want the functionality to be implemented where I can connect 2 divs with a line to the click event. The concept is to match the contents in two different columns corresponding to the following. Please help me as I tried everything I could, as I don’t want to use external or HTML5 canvas. Is it possible to achieve only with jquery, css and html. Answer, please. Thank.

Answer 1

I might have a potential idea for a line consisting of three lines: horizontal (from an element), vertical (up or down) and horizontal (to another element). You can create 2 very small columns with rows between columns A and B without borders, and then use jquery.css to add the corresponding borders to the desired columns and rows.

If you want to animate rows, you can create divs that are 0 in size, and then increase the size of the columns so that the borders are displayed.

Here's the basic fidde: http://jsfiddle.net/3xPpc/ HTML:

<div class="big-col"> <div class="big-row blue"></div> <div class="big-row green"></div> <div class="big-row blue"></div> <div class="big-row green"></div> </div> <div class="small-col"> <div id="row-1-left" class="small-row"></div> <div id="row-2-left" class="small-row"></div> <div id="row-3-left" class="small-row"></div> <div id="row-4-left" class="small-row"></div> <div id="row-5-left" class="small-row"></div> <div id="row-6-left" class="small-row"></div> <div id="row-7-left" class="small-row"></div> <div id="row-8-left" class="small-row"></div> </div> <div class="small-col"> <div id="row-1-right" class="small-row"></div> <div id="row-2-right" class="small-row"></div> <div id="row-3-right" class="small-row"></div> <div id="row-4-right" class="small-row"></div> <div id="row-5-right" class="small-row"></div> <div id="row-6-right" class="small-row"></div> <div id="row-7-right" class="small-row"></div> <div id="row-8-right" class="small-row"></div> </div> <div class="big-col"> <div class="big-row blue"></div> <div class="big-row green"></div> <div class="big-row blue"></div> <div class="big-row green"></div> </div> 

CSS: .big-col {swim left; }

 .small-col { float: left; } .big-row { width: 200px; height: 100px; } .blue { background-color: blue; } .green { background-color: green; } .small-row { width: 40px; height: 50px; } #row-1-left { border-bottom: 1px solid orange; } #row-5-right { border-bottom: 1px solid orange; } #row-2-right, #row-3-right, #row-4-right, #row-5-right { border-left: 1px solid orange; } 

All you have to do is add borders on click using jQuery.

Answer 2

Good. Here is an example of what you can do about this. Of course, some work can be more flexible and elegant. Right now it is joining divs with the same row / column. The base is checking the top / left positions of the pressed elements and adding additional divs to draw lines. For divs on the same line ie

 if (pos_1.top == pos_2.top) { // same row if (Math.abs(pos_1.left - pos_2.left) == 100) { // adjacent var bar = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top - 2 + div_1.height() / 2) + "px", "height" : "5px", "width" : "50px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 50) + "px" }); $("body").append(bar); } else { // same row not adjacent var bar1 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 50) + "px", "height" : "20px", "width" : "5px", "left" : (pos_1.left - 2 + div_1.width() / 2) + "px"}); var bar2 = bar1.clone().css({"left" : (pos_2.left - 2 + div_2.width() / 2) + "px"}); var bar3 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 65) + "px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 25) + "px", "width" : "200px", "height" : "5px" }); $("body").append(bar1).append(bar2).append(bar3); } } 

HERE FIDDLE