绘制连接两个已单击的div列的线 [英] Draw a line connecting two clicked div columns

问题描述

我想要实现一个功能，我可以连接2 divs与点击事件线。这个概念是关于匹配2个不同列中的内容，匹配如下。请帮助我，因为我已经尝试了一切，我可以，因为我不想使用任何外部或HTML5画布。是可能实现与jQuery，css和html只。请回复。谢谢。

解决方案

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

如果您希望动画线条，您可以创建尺寸为0 initialy的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-leftclass =small-row>< / div> 
< div id =row-2-leftclass =small-row>< / div> 
< div id =row-3-leftclass =small-row>< / div> 
< div id =row-4-leftclass =small-row>< / div> 
< div id =row-5-leftclass =small-row>< / div> 
< div id =row-6-leftclass =small-row>< / div> 
< div id =row-7-leftclass =small-row>< / div> 
< div id =row-8-leftclass =small-row>< / div> 
< / div> 
< div class =small-col> 
< div id =row-1-rightclass =small-row>< / div> 
< div id =row-2-rightclass =small-row>< / div> 
< div id =row-3-rightclass =small-row>< / div> 
< div id =row-4-rightclass =small-row>< / div> 
< div id =row-5-rightclass =small-row>< / div> 
< div id =row-6-rightclass =small-row>< / div> 
< div id =row-7-rightclass =small-row>< / div> 
< div id =row-8-rightclass =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 {
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固体橙色; 
} 
  

所有你需要做的是使用jQuery添加边框。 / p>

I want a functionality to be implemented where i can connect 2 divs with a line on click event. The concept is about matching contents in 2 different columns same as match the following. Please help me as i have tried everything I could as I don't want to use any external or HTML5 canvas. Is it possible to achieve with jquery, css and html only. Please reply.Thank you.

解决方案

I might have a potential idea for a line consisting of three lines - horizontal (from element), vertical (up or down) and horizontal (to another element) again. You could create 2 very small columns with rows between the column A and B without borders, then using jquery .css add coresponding borders to the right columns and rows.

If you wish for animating the lines, you could create divs that have a size of 0 initialy, then animate the size of the columns so the borders appear.

Here's a basic 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 { 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;
}

All you have to do is to add the borders on click with jQuery.

这篇关于绘制连接两个已单击的div列的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！