DRAW LINE BETWEEN DIV BY CLICK ON DIV...

Milind narkhede

Total Post:12

Points:84
Posted by  Milind narkhede
 1899  View(s)
Ratings:
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..
  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: Draw line between div by click on div...

    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
  1. Milind narkhede

    Post:12

    Points:84
    Re: Draw line between div by click on div...

    Your code is not running......

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

    please reply me......

  1. John Smith

    Post:102

    Points:720
    Re: Draw line between div by click on div...

    Milind can you upload or paste your code here?

  1. Milind narkhede

    Post:12

    Points:84
    Re: Draw line between div by click on div...

    <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>

  1. Milind narkhede

    Post:12

    Points:84
    Re: Draw line between div by click on div...

    Hi, Kamlakar Singh

    I am Waiting for your reply please solve the problem....

  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: Draw line between div by click on div...

    Hi Milind

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

    you can check here : Demo

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!