locked
How to connect two div dynamically by connecting line ? RRS feed

  • 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;">
    &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

    Thursday, November 3, 2016 8:08 AM