4

I wanted to map two fields and draw line between two things if I found match in them. Below is the code.

<html>
    <head>
        <style type="text/css">
            .container {
                width: 600px;
                margin: 100px auto;
            }
            .block {
                padding: 20px;
                width: 100px;
                color: #FFFFFF;
                font-weight: bold;
                font-size: 18px;
                text-align: center;
                margin-bottom: 20px;
            }
            .left-side {
                float: left;
            }
            .right-side {
                float: right;
            }
            .pink {
                background: pink;
            }
            .red {
                background: red;
            }
            .green {
                background: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left-side">
                <div class="block pink" id="a">A</div>
                <div class="block red" id="b">B</div>
                <div class="block green" id="c">C</div>
            </div>
            <div class="right-side">
                <div class="block green" id="cc">C</div>
                <div class="block pink" id="aa">A</div>
                <div class="block red" id="bb">B</div>
            </div>
        <div>
    </body>
</html>

I want result to be like below image:- enter image description here

I want to draw line by myself by looking at the colors. It should not be already drawn lines. Is this possible to do this?

Yogesh
  • 331
  • 1
  • 4
  • 10
  • It is possible using canvas or svg. Mixing existing DIV with svg and canvas is possible, but if you draw the A,B,C rectangle also in SVG/Canvas it will be easier. – sabithpocker May 04 '17 at 09:37
  • can you share some example for reference? – Yogesh May 04 '17 at 09:41
  • Possible duplicate of [How to connect HTML Divs with Lines?](http://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines) – Theodore K. May 04 '17 at 09:43
  • jsPlumb mentioned in [this answer](http://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs) can help you with dynamic lines. – sabithpocker May 04 '17 at 09:47
  • Possible duplicate of [Drawing a line between two divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-divs) – balupton Nov 05 '18 at 21:04

1 Answers1

0

Create a line and an arrow (use border can create it).

var disX = leftA.right - rightA.left;
var disY = leftA.top - rightA.top;
var dis = Math.sqrt( disX * disX + disY * disY );
line.style.width = dis;
line.style.transform = `rotate(${Math.atan(disY/disX)}deg)`;

The code looks like this.

Pang
  • 9,564
  • 146
  • 81
  • 122
喝茶的螃蟹
  • 134
  • 6