---
title: "Draw line between div by click on div..."  
description: "Draw line between div by click on div..."  
author: "Milind narkhede"  
published: 2015-02-25  
updated: 2026-05-15  
canonical: https://www.mindstick.com/forum/12982/draw-line-between-div-by-click-on-div  
category: "javascript"  
tags: ["javascript"]  
reading_time: 6 minutes  

---

# Draw line between div by click on div...

![Draw line between div by click on div...](https://www.mindstick.com/mindstickforums/d8504028-1b38-4e78-a6c8-c5ed53fdbfe0/images/8c5bdbb2-c19c-48f9-ad43-889c4ff8f9bb.png)\
\
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..

## Replies

### Reply by Anonymous User

Hi Milindcan you tell meAre you using JQuery file?because my sample is running without any errors.\
you can check here : Demo

### Reply by Milind narkhede

Hi, Kamlakar Singh \
\
I am Waiting for your reply please solve the problem....\

### Reply by Milind narkhede

<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>\
\

### Reply by John Smith

Milind can you upload or paste your code here?\

### Reply by Milind narkhede

Your code is not running......\
\
i have checked on http://jsfiddle.net/tg9vawgs/\
\
please reply me......\

### Reply by Anonymous User

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:

![Draw line between div by click on div...](https://www.mindstick.com/mindstickforums/d8504028-1b38-4e78-a6c8-c5ed53fdbfe0/images/8d731daf-aac4-4970-a2fe-645481b8d705.png)\


---

Original Source: https://www.mindstick.com/forum/12982/draw-line-between-div-by-click-on-div

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
