Question

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

Answer 1

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

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

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

  <div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>
<div class="small-col">
    <div id="row-1-left" class="small-row"></div>
    <div id="row-2-left" class="small-row"></div>
    <div id="row-3-left" class="small-row"></div>
    <div id="row-4-left" class="small-row"></div>
    <div id="row-5-left" class="small-row"></div>
    <div id="row-6-left" class="small-row"></div>
    <div id="row-7-left" class="small-row"></div>
    <div id="row-8-left" class="small-row"></div>
</div>
<div class="small-col">
    <div id="row-1-right" class="small-row"></div>
    <div id="row-2-right" class="small-row"></div>
    <div id="row-3-right" class="small-row"></div>
    <div id="row-4-right" class="small-row"></div>
    <div id="row-5-right" class="small-row"></div>
    <div id="row-6-right" class="small-row"></div>
    <div id="row-7-right" class="small-row"></div>
    <div id="row-8-right" class="small-row"></div>
</div>
<div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>

CSS： .big-col { 向左飘浮; }

.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 = $("<div></div>").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 = $("<div></div>").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 = $("<div></div>").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);
  }
}

<强> HERE'S THE FIDDLE

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

2 个答案: