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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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;">
&nbsp;
</div>
<br/><br/>
<div id="div2" style="; background-color:red; width:100px; height: 200px; top: 300px; left: 300px;">
&nbsp;
</div>
<input type="button" onclick="testIt();" value="Draw Line" />

Output:

Reference For Demo:

Draw line between 2 Divs

Regards

Deepak