Home > DeveloperSection > Forums > Draw line between div by click on div...
Milind narkhede

Total Post:12

Points:84
Posted on    February-25-2015 11:52 PM

 JavaScript JavaScript 
Ratings:


 6 Reply(s)
 1405  View(s)
Rate this:


If i click the image the moon and next image star draw line b/w them.and next i click orbitalradius them draw start to orbitalradius line..


Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    February-26-2015 5:29 AM

Hi Milind you can try this code

CSS:

<style>

    img {

        padding: 1px;

        margin: 2px;

        float: left;

        background-color: #99BC99

    }

    img.selected {

        padding: 2px;

        margin: 4px;       

        background-color: #E13300

    }

</style>

HTML:

<span style="position: absolute; left: 933px; top: 211px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div1" /></span>

    <span style="position: absolute; left: 304px; top: 190px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div2" /></span>

    <span style="position: absolute; left: 756px; top: 264px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div3" /></span>

    <span style="position: absolute; left: 365px; top: 395px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div4" /></span>

    <span style="position: absolute; left: 129px; top: 302px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div5" /></span>

    <span style="position: absolute; left: 504px; top: 261px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div6" /></span>

    <span style="position: absolute; left: 650px; top: 393px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div7" /></span>

    <span style="position: absolute; left: 283px; top: 26px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div8" /></span>

    <span style="position: absolute; left: 593px; top: 35px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div9" /></span>

    <span style="position: absolute; left: 784px; top: 42px;">

<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div10" /></span>

Javascript:

<script>

    $(document).ready(function () {

        $('img').click(function () {

            var $elem1 = $(this).parent();

            var $elem2 = $('span.last');

            $(this).toggleClass('selected');

            if ($elem2.length > 0) {

                connect($elem1[0], $elem2[0], "#0F0", 5);

            } else { $elem1.addClass('last'); }

            $('span').removeClass('last');

            $elem1.addClass('last');

        });

    });

    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; position:absolute; 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);' />";

        //

        //document.body.innerHTML += htmlLine;

        $('body').append($(htmlLine));

    }

    function getOffset(el) {

        var _x = 0;

        var _y = 0;

        var _w = el.offsetWidth | 0;

        var _h = el.offsetHeight | 0;

        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {

            _x += el.offsetLeft - el.scrollLeft;

            _y += el.offsetTop - el.scrollTop;

            el = el.offsetParent;

        }

        return { top: _y, left: _x, width: _w, height: _h };

    }

    window.testIt = function () {

        var div1 = document.getElementById('div1')

        var div2 = document.getElementById('div2')

        connect(div1, div2, "#0F0", 5);

    }

</script>

Output:



Modified On Feb-26-2015 05:32:28 AM

Milind narkhede

Total Post:12

Points:84
Posted on    February-26-2015 5:42 AM

Your code is not running......

i have checked on http://jsfiddle.net/tg9vawgs/

please reply me......

John Smith

Total Post:102

Points:720
Posted on    February-26-2015 7:44 AM

Milind can you upload or paste your code here?

Milind narkhede

Total Post:12

Points:84
Posted on    February-26-2015 9:31 PM

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>

    img {

        padding: 1px;

        margin: 2px;

        float: left;

        background-color: #99BC99

    }

    img.selected {

        padding: 2px;

        margin: 4px;       

        background-color: #E13300

    }

</style>
<script type="text/javascript">

    $(document).ready(function () {
       
        $('img').click(function () {
          
            var $elem1 = $(this).parent();

            var $elem2 = $('span.last');

            $(this).toggleClass('selected');

            if ($elem2.length > 0) {

                connect($elem1[0], $elem2[0], "#0F0", 5);

            } else { $elem1.addClass('last'); }

            $('span').removeClass('last');

            $elem1.addClass('last');

        });

    });

    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; position:absolute; 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);' />";

        //

        //document.body.innerHTML += htmlLine;

        $('body').append($(htmlLine));

    }

    function getOffset(el) {

        var _x = 0;

        var _y = 0;

        var _w = el.offsetWidth | 0;

        var _h = el.offsetHeight | 0;

        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {

            _x += el.offsetLeft - el.scrollLeft;

            _y += el.offsetTop - el.scrollTop;

            el = el.offsetParent;

        }

        return { top: _y, left: _x, width: _w, height: _h };

    }

    window.testIt = function () {

        var div1 = document.getElementById('div1')

        var div2 = document.getElementById('div2')

        connect(div1, div2, "#0F0", 5);

    }

</script>
</head>
<body>

<span style="position: absolute; left: 933px; top: 211px;">
   
       <a id="div1" href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>

    <span style="position: absolute; left: 304px; top: 190px;">

         <a id="div2"  href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>

    <span style="position: absolute; left: 756px; top: 264px;">

        <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" id="div3" /></span>

    <span style="position: absolute; left: 365px; top: 395px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div4" /></span>

    <span style="position: absolute; left: 129px; top: 302px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div5" /></span>

    <span style="position: absolute; left: 504px; top: 261px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div6" /></span>

    <span style="position: absolute; left: 650px; top: 393px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div7" /></span>

    <span style="position: absolute; left: 283px; top: 26px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div8" /></span>

    <span style="position: absolute; left: 593px; top: 35px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div9" /></span>

    <span style="position: absolute; left: 784px; top: 42px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div10" /></span>

</body>
</html>


Milind narkhede

Total Post:12

Points:84
Posted on    February-26-2015 11:12 PM


Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    February-27-2015 3:14 AM

Hi Milind
can you tell me
Are you using JQuery file?
because my sample is running without any errors.

you can check here : Demo

Don't want to miss updates? Please click the below button!

Follow MindStick