Asked by:
How to connect two div dynamically by connecting line ?

Question
-
User-147238865 posted
Hii all;
I am trying to do that connect two div dynamically by following way :-
https://1drv.ms/u/s!AvHs5oVtdBkbtgZIl5e0wX0H_8Yc
In this video i define that how i am trying to do;please watch it.
I tried a lot to do this by visiting many site but not get appropriate result as i want; so if you have any idea or technique please share with me.
I want to do it manually; because i have lots of customize thing to do; so please suggest me any idea or hints to do this.
I already visitied many site like :-
https://jsplumbtoolkit.com/
www.raphel.js
and many more; but not getting how to do that.
Thanks
Regards:
SK.Monday, September 26, 2016 1:03 PM
All replies
-
User527778624 posted
Hi,
Please share your tried code by posting it in sites like JSbin or JSFiddle, so that anyone can help on your code.
post it simple which describes your scenario only.
Monday, September 26, 2016 3:02 PM -
User-147238865 posted
Thanks raju for quick reply;
I am given one video in my post when you watch this you can come to know what actually i want to do ?
Again after watching the video if you don't understand any thing then reply me.
My requirement is i need to design same way as given in video using HTML and Javascript; that's all.
https://1drv.ms/u/s!AvHs5oVtdBkbtgZIl5e0wX0H_8Yc
Please watch the above video in VLC media player.
Thanks.
Wednesday, September 28, 2016 12:23 PM -
User1771544211 posted
Hi SURYA_TECH,
You can achieve this with JsPlumb: https://github.com/sporritt/jsplumb/
Answer picked from : http://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines
Best Regards,
Jean
Friday, October 14, 2016 8:33 AM -
User347430248 posted
Hi Surya Tech,
please use the code mentioned below.
JavaScript code:
function connect(div1, div2, color, thickness) { var off1 = getOffset(div1); var off2 = getOffset(div2); // bottom right var x1 = off1.left + off1.width; var y1 = off1.top + off1.height; // top right var x2 = off2.left + off2.width; var y2 = off2.top; // distance var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1))); // center var cx = ((x1 + x2) / 2) - (length / 2); var cy = ((y1 + y2) / 2) - (thickness / 2); // angle var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI); // make hr var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; ; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />"; // alert(htmlLine); document.body.innerHTML += htmlLine; } function getOffset( el ) { var rect = el.getBoundingClientRect(); return { left: rect.left + window.pageXOffset, top: rect.top + window.pageYOffset, width: rect.width || el.offsetWidth, height: rect.height || el.offsetHeight }; } window.testIt = function() { var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2') connect(div1, div2, "#0F0", 5); }
HTML Code:
<div id="div1" style="; background-color:blue; width:100px; height: 200px;top: 200px; left: 100px;"> </div> <br/><br/> <div id="div2" style="; background-color:red; width:100px; height: 200px; top: 300px; left: 300px;"> </div> <input type="button" onclick="testIt();" value="Draw Line" />
Output:
Reference For Demo:
Regards
Deepak
Thursday, November 3, 2016 8:08 AM