绘制一条连接两个单击div列的线

我想要实现一个function，我可以在点击事件上连接2个div与一行。 该概念是关于匹配以下匹配的2个不同列中的内容。 请帮助我，因为我已尽力而为，因为我不想使用任何外部或HTML5canvas。 是否可以仅使用jquery，css和html实现。 请回复。谢谢。

Answer 1

我可能有一个由三条线组成的线的潜在想法 – 水平（从元素），垂直（向上或向下）和水平（到另一个元素）再次。 您可以创建2个非常小的列，其中A列和B列之间没有边框，然后使用jquery .css向右侧列和行添加相应的边框。

如果您希望为线条设置动画，则可以初始化创建大小为0的div，然后设置列的大小，以便显示边框。

这是一个基本的fidde： http ： //jsfiddle.net/3xPpc/ HTML：

CSS：.big-col {float：left; }

 .small-col { float: left; } .big-row { width: 200px; height: 100px; } .blue { background-color: blue; } .green { background-color: green; } .small-row { width: 40px; height: 50px; } #row-1-left { border-bottom: 1px solid orange; } #row-5-right { border-bottom: 1px solid orange; } #row-2-right, #row-3-right, #row-4-right, #row-5-right { border-left: 1px solid orange; } 

您所要做的就是使用jQuery添加边框。

Answer 2

好的。 这是一个关于你可以做些什么的例子。 当然，通过一些工作，它可以更加灵活和优雅。 现在它连接相同行/列上的divs 。 基本是检查点击元素的top / left位置，并附加一些额外的divs来绘制线条。 对于同一行的divs ，即

 if (pos_1.top == pos_2.top) { // same row if (Math.abs(pos_1.left - pos_2.left) == 100) { // adjacent var bar = $("
").addClass("connectbar").css({ "top" : (pos_1.top - 2 + div_1.height() / 2) + "px", "height" : "5px", "width" : "50px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 50) + "px" }); $("body").append(bar); } else { // same row not adjacent var bar1 = $("
").addClass("connectbar").css({ "top" : (pos_1.top + 50) + "px", "height" : "20px", "width" : "5px", "left" : (pos_1.left - 2 + div_1.width() / 2) + "px"}); var bar2 = bar1.clone().css({"left" : (pos_2.left - 2 + div_2.width() / 2) + "px"}); var bar3 = $("
").addClass("connectbar").css({ "top" : (pos_1.top + 65) + "px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 25) + "px", "width" : "200px", "height" : "5px" }); $("body").append(bar1).append(bar2).append(bar3); } } 

这就是好消息