Continuing the discussion from How to update the lines so that they do not break away from the rectangles after dragging?:
<!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>
