如何用JQuery为div匹配划一条线？

我有一个带有JQuery的html项目，需要能够允许用户从一列到另一列从另一列选择面板。我知道如何进行选择，但在绘制连接线时遇到困难。当用户选择第一个面板时，一条水平线将以圆圈连接到中间。然后，当用户选择PANEL2时，中间的垂直线将向上或向下移动（取决于PANEL2所在的位置为PANEL1），然后绘制第二个水平线来连接PANEL2。p> 您可以在此处看到最终结果的示例

---

我不知道是否有任何JQuery库用于此，但您总是有svg行的解决方案。请看下面的代码片段

。左块{
宽度：100px；
高度：20px；
顶部：10px；
左：10px；
边框：1px实心#777；
位置：绝对位置；
}
1.右座{
宽度：100px；
高度：20px；
顶部：200px；
左：300px；
边框：1px实心#777；
位置：绝对位置；
}
.圆形块{
宽度：20px；
高度：20px；
顶部：10px；
左：190px；
位置：绝对位置；
边框：1px实心#777；
边界半径：20px；
}
.台词{
高度：210px；
}

---

@Scott这对你有帮助吗？这是你想要的吗？