How to update the lines so that they do not break away from the rectangles after dragging? - svg

Question

I beg you to help me. I'm creating a small chart and it's not working make the connecting lines between the rectangles so that they stretch
after moving the rectangle-nodes. What we have:
3 rectangles created in OOR js svg;
created connecting lines with rectangles (in OOP js svg);
function for moving rectangle-nodes.
What is the problem. When dragging nodes, the lines break away from the rectangles.
An example of how a diagram works
here
I ask for help in creating a function for updating the line when dragging the nodes of the diagram.
I think that it needs to put the value of the points of contact, put the name of the update function
to the code of the drag/drop function
created the updateLines() function;
inserted conn1.x1 into it; conn.y1;conn1.x2;conn1.y2;
inserted into it var connect1 = new Lines();
connect1.draw();
varx3 = rec3.location.x+100; var y3 = rec3.location.y; /////
var connect2 = new Lines(rec1.location.x+100,rec1.location.y+80, rec3.location.x+100, rec3.location.y,stroke='green',id='l2');
connect2.draw();
I inserted the name of the function into the makeDraggable(evt) code;
<style>
.background {
fill: #eee;
}
.static {
cursor: not-allowed;
}
.draggable {
cursor: move;
}
</style>
-----------------------
<svg xmlns="http://www.w3.org/2000/svg" id="forDraw" viewBox="0 0 1330 420" onload="makeDraggable(evt)">
</svg>
------------------
function makeDraggable(evt) {
var svg = evt.target;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
var selectedElement, offset;
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
offset.x -= parseFloat(selectedElement.getAttributeNS(null, "x"));
offset.y -= parseFloat(selectedElement.getAttributeNS(null, "y"));
}
}
function drag(evt) {
if (selectedElement) {
var coord = getMousePosition(evt);
selectedElement.setAttributeNS(null, "x", coord.x - offset.x);
selectedElement.setAttributeNS(null, "y", coord.y - offset.y);
}
}
function endDrag(evt) {
selectedElement = null;
}
}
var recWidth = '200';
var recHeight = '80';
function Rectangle(width,height, location={x: 400, y: 50},style='draggable', fill = 'red', stroke = 'green',id='ivan') {
this.width = recWidth;
this.height = recHeight;
this.location = location;
this.style = style;
this.fill = fill;
this.stroke = stroke;
this.id = id;
this.draw = function() {
forDraw.innerHTML += `<rect width="${this.width}" height="${this.height}" x="${this.location.x}" y="${this.location.y}"
class="${this.style}" fill="${this.fill}" stroke="${this.stroke}" id="${this.id}" />`;
}
}
Rectangle.prototype.draw = function() {
if (forDraw.getElementById(this.id)) forDraw.getElementById(this.id).remove();
forDraw.innerHTML += `<rect width="${this.width}" height="${this.height}" x="${this.location.x}" y="${this.location.y}"
class="${this.style}" fill="${this.fill}" stroke="${this.stroke}" id="${this.id}" />`;
}
var rec1 = new Rectangle();
rec1.draw();
var rec2 = new Rectangle(150,90, {x: 300, y:300}, style='draggable','yellow', 'red','petro');
rec2.draw();
var rec3 = new Rectangle(150,90, {x: 550, y:300}, style='draggable','green', 'blue','dima');
rec3.draw();
function Lines(x1=rec1.location.x+100, y1=rec1.location.y+80, x2=rec2.location.x+100, y2=rec2.location.y, stroke='blue',id='l1') {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.stroke = stroke;
this.id = id;
this.draw = function() {
forDraw.innerHTML += `<line x1="${this.x1}" y1="${this.y1}" x2="${this.x2}" y2="${this.y2}"
stroke="${this.stroke}" id="${this.id}" />`;
}
}
var connect1 = new Lines();
connect1.draw();
var x3 = rec3.location.x+100;
var y3 = rec3.location.y;
/////
var connect2 = new Lines(rec1.location.x+100,rec1.location.y+80, rec3.location.x+100, rec3.location.y,stroke='green',id='l2');
connect2.draw();