# diagram with div

**URL:** <https://forum.kirupa.com/t/diagram-with-div/656090>\
**Category:** web dev\
**Created:** [January 8, 2023, 2:24pm UTC](https://forum.kirupa.com/t/diagram-with-div/656090 "2023-01-08T14:24:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivchenko505](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ivchenko505/32/20145_2.png) [@ivchenko505](https://forum.kirupa.com/u/ivchenko505)\
**Post date:** [January 8, 2023, 2:24pm UTC](https://forum.kirupa.com/t/diagram-with-div/656090/1 "2023-01-08T14:24:41Z")

</div>

Continuing the discussion from [How to update the lines so that they do not break away from the rectangles after dragging?](http://forum.kirupa.com/t/how-to-update-the-lines-so-that-they-do-not-break-away-from-the-rectangles-after-dragging/655984/6):

```auto
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drag-line-2</title>
</head>

<style>
    #mydiv {
        position: absolute;
        z-index: 9;
        background-color: #d10e0e;
        text-align: center;
        border: 1px solid #936565;
        left: 300px;
        top: 10px;
        width: 180px;
        height: 100px;
    }

    #mydiv2 {
        position: absolute;
        z-index: 9;
        background-color: #fb9090;
        text-align: center;
        border: 1px solid #d3d3d3;
        width: 180px;
        left: 200px;
        top: 210px;
        height: 100px;
    }

    #mydiv3 {
        position: absolute;
        z-index: 9;
        background-color: #fb9090;
        text-align: center;
        border: 1px solid #d3d3d3;
        width: 180px;
        left: 400px;
        top: 210px;
        height: 100px;
    }

    #mydivheader {
        padding: 10px;
        cursor: move;
        z-index: 10;
        background-color: #2196F3;
        color: #fff;
    }

    #mydivheader2 {
        padding: 10px;
        cursor: move;
        z-index: 10;
        background-color: #2196F3;
        color: #fff;
    }

    #mydivheader3 {
        padding: 10px;
        cursor: move;
        z-index: 10;
        background-color: #2196F3;
        color: #fff;
    }

    .org .org-box {
        position: relative;
        bottom: 0px;
        width: 15px;
        height: 15px;
        border-radius: 20px;
        background: #4E4E50;
        transition: 0.6s;
    }
</style>

<body>
    <!-- 
        https://stackoverflow.com/questions/69773949/connect-a-line-between-2-divs
        https://www.w3schools.com/howto/howto_js_draggable.asp <h1>Draggable <br>DIV Element</h1>
-->

    <div id="mydiv" class="org">
        <div id="mydivheader">Іван</div>

    </div>
    <div id="mydiv2" class="org">
        <div id="mydivheader2">Микола</div>

    </div>
    <div id="mydiv3" class="org">
        <div id="mydivheader3">Петро</div>

    </div> <svg width="1200" height="500" id="lines">
        <line id="line1" />
        <line id="line2" />
    </svg>
    <script>
        //Make the DIV element draggagle:
        dragElement(document.getElementById("mydiv"));
        dragElement(document.getElementById("mydiv2"));
        dragElement(document.getElementById("mydiv3"));

        function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            if (document.getElementById(elmnt.id + "header")) {
                /* if present, the header is where you move the DIV from:
                если он присутствует, заголовок — это место, откуда вы перемещаете DIV:*/
                document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
            } else {
                /* otherwise, move the DIV from anywhere inside the DIV:
                в противном случае переместите DIV из любого места внутри DIV:*/
                elmnt.onmousedown = dragMouseDown;
            }

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                // get the mouse cursor position at startup:
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                // call a function whenever the cursor moves:
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                // calculate the new cursor position:
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // set the element's new position:
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
                update();
            }

            function closeDragElement() {
                /* stop moving when mouse button is released:*/
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        function update() {
            let line1 = document.getElementById('line1');

            let svgRect = document.getElementById('lines').getBoundingClientRect();

            let rect1 = document.getElementById('mydiv').getBoundingClientRect();
            let rect2 = document.getElementById('mydiv2').getBoundingClientRect();
            let rect3 = document.getElementById('mydiv3').getBoundingClientRect();

            let dot1x = (rect1.left + rect1.right) / 2;
            let dot1y = (rect1.top + rect1.bottom) / 1.2;

            let dot2x = (rect2.left + rect2.right) / 2;
            let dot2y = (rect2.top + rect2.bottom) / 2.5;
            let dot3x = (rect3.left + rect3.right) / 2;
            let dot3y = (rect3.top + rect3.bottom) / 2.5;

            setAttributes(line1, {
                'x1': dot1x - svgRect.left,
                'y1': dot1y - svgRect.top,
                'x2': dot2x - svgRect.left,
                'y2': dot2y - svgRect.top,
                'stroke': 'red',
                'stroke-width': 14,
                'stroke-linecap': 'round',
                //'path': 'd = M3, 3 h0',
            });
            setAttributes(line2, {
                'x1': dot1x - svgRect.left,
                'y1': dot1y - svgRect.top,
                'x2': dot3x - svgRect.left,
                'y2': dot3y - svgRect.top,
                'stroke': 'red',
                'stroke-width': 14,
                'stroke-linecap': 'round',
                //'path': 'd = M3, 3 h0',
            });
            // helper function from https://stackoverflow.com/a/12274782/6263942
            function setAttributes(el, attrs) {
                for (var key in attrs) {
                    el.setAttribute(key, attrs[key]);
                }
            }
        }
        update();
    </script>

</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 8, 2023, 4:11pm UTC](https://forum.kirupa.com/t/diagram-with-div/656090/2 "2023-01-08T16:11:08Z")

</div>

Did Paez’s suggestion in that thread work for you?

---

<div class="post-metadata">

**Author:** ![ivchenko505](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ivchenko505/32/20145_2.png) [@ivchenko505](https://forum.kirupa.com/u/ivchenko505)\
**Post date:** [January 19, 2023, 11:04am UTC](https://forum.kirupa.com/t/diagram-with-div/656090/3 "2023-01-19T11:04:53Z")

</div>

This is my suggestion
