jQuery-将两个以上的div相互连接

我无法确保我可以连接更多的div。有人能帮我吗？我需要找到处理这件事的最佳方法。黑匣子是div。我想用红线连接，总是在中间。

我使用了以下脚本：

功能连接（div1、div2、颜色、厚度）{
var off1=getOffset（第1部分）；
var off2=getOffset（第2部分）；
//右下角
var x1=off1.left+off1.width；
变量y1=off1.top+off1.height；
//右上角
var x2=off2.left+off2.width；
变量y2=off2.top；
//距离
变量长度=数学sqrt（（x2-x1）*（x2-x1））+（（y2-y1）*（y2-y1））；
//居中
变量cx=（（x1+x2）/2）-（长度/2）；
var-cy=（（y1+y2）/2）-（厚度/2）；
//角度
变量角度=数学atan2（（y1-y2），（x1-x2））*（180/数学PI）；
//制造人力资源
var htmline=“”；
//
警报（HTMLINE）；
document.body.innerHTML+=htmlLine；
}
函数getOffset（el）{
var rect=el.getBoundingClientRect（）；
返回{
左：rect.left+window.pageXOffset，
顶部：rect.top+window.pageYOffset，
宽度：矩形宽度| | el.offsetWidth，
高度：垂直高度
};
}
window.testIt=函数（）{
var div1=document.getElementById（'div1'）；
var div2=document.getElementById（'div2'）
连接（第1部分、第2部分、第5部分）；
}

您的所有div的高度是否与图中相同？并且相对于顶部有相同的位置？您可以使用jsplumb来实现this@Adder，所有div的高度相同，但布局有3个不同的div行。第1行=7个箱子，第2行=3个箱子，第3行=5个箱子。他们需要连接的全部内容。可能通过调整方框的z索引和css中的红色填充div，在方框后面放置一个具有绝对位置的红色填充div，使红色填充div位于方框后面。所有div的高度是否与图中相同？并且相对于顶部有相同的位置？您可以使用jsplumb来实现this@Adder，所有div的高度相同，但布局有3个不同的div行。第1行=7个箱子，第2行=3个箱子，第3行=5个箱子。他们需要连接的全部内容。可以通过调整方框的z索引和css中的红色填充div，使红色填充div位于方框后面，从而在方框后面放置一个具有绝对位置的红色填充div。

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);' />";
//
alert(htmlLine);
document.body.innerHTML += htmlLine; 
}

function getOffset( el ) {
var rect = el.getBoundingClientRect();
return {
    left: rect.left + window.pageXOffset,
    top: rect.top + window.pageYOffset,
    width: rect.width || el.offsetWidth,
    height: rect.height || el.offsetHeight
};
}

window.testIt = function() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2')
connect(div1, div2, "#0F0", 5);
}