Come connettere HTML Div con linee?

Question

Sulla mia pagina ho un insieme di elementi div che dovrebbero essere collegati con linee come ho mostrato nell'immagine qui sotto. So che con una tela posso disegnare delle linee tra questi elementi, ma è possibile farlo in un altro modo in html/css?

Answer 1

E 'una specie di dolore alla posizione, ma si potrebbe usare 1px larghe div come linee e la posizione e ruotarle in modo appropriato.

http://jsfiddle.net/sbaBG/1

<div class="box" id="box1"></div> 
<div class="box" id="box2"></div> 
<div class="box" id="box3"></div> 

<div class="line" id="line1"></div> 
<div class="line" id="line2"></div> 

.box { 
    border: 1px solid black; 
    background-color: #ccc; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
} 
.line { 
    width: 1px; 
    height: 100px; 
    background-color: black; 
    position: absolute; 
} 
#box1 { 
    top: 0; 
    left: 0; 
} 
#box2 { 
    top: 200px; 
    left: 0; 
} 
#box3 { 
    top: 250px; 
    left: 200px; 
} 
#line1 { 
    top: 100px; 
    left: 50px; 
} 
#line2 { 
    top: 220px; 
    left: 150px; 
    height: 115px; 

    transform: rotate(120deg); 
    -webkit-transform: rotate(120deg); 
    -ms-transform: rotate(120deg); 
} 

Answer 2

sicuramente possibile con qualsiasi numero di librerie e/o tecnologie HTML5. Potresti incidere qualcosa in puro CSS usando qualcosa come la proprietà border-bottom, ma probabilmente sarebbe orribilmente hacky.

Se sei serio su questo, dovresti dare un'occhiata a una libreria JS per disegno su tela o SVG. Ad esempio, qualcosa come http://www.graphjs.org/ o http://jsdraw2dx.jsfiction.com/

Answer 3

Creare un div che è la linea con il codice in questo modo:

CSS

div#lineHorizontal { 
    background-color: #000; 
    width: //the width of the line or how far it goes sidewards; 
    height: 2px; 
    display: inline-block; 
    margin: 0px; 
} 
div#block { 
    background-color: #777; 
    display: inline-block; 
    margin: 0px; 
} 

HTML

<div id="block"> 
</div> 
<div id="lineHorizontal"> 
</div> 
<div id="block"> 
</div> 

Questo mostrerà un blocco con una linea orizzontale ad un altro blocco.

Sui dispositivi mobili è possibile utilizzare (caniuse.com/transforms2d)

Answer 4

controllare il mio violino da questa discussione: Draw a line connecting two clicked div columns

Il layout è diverso, ma fondamentalmente l'idea è quella di creare div invisibili tra le scatole e aggiungi i bordi corrispondenti con jQuery (la risposta è solo HTML e CSS)

Answer 5

È possibile utilizzare https://github.com/musclesoft/jquery-connections. Ciò consente di collegare elementi di blocco in DOM.

Answer 6

È possibile utilizzare SVG per collegare due div utilizzando solo HTML e CSS:

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div> 
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div> 

(si prega di utilizzare il file CSS separato per lo styling)

Creare una linea di SVG e utilizzare questa linea per collegare div sopra

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg> 

dove,

x1, y1 indica centro di prima div e
x2, y2 indica centro della seconda div

È possibile controllare come appare nel frammento qui sotto

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div> 
 
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div> 
 

 
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

Answer 7

I made something like this to my project

function adjustLine(from, to, line){ 
 

 
    var fT = from.offsetTop + from.offsetHeight/2; 
 
    var tT = to.offsetTop + to.offsetHeight/2; 
 
    var fL = from.offsetLeft + from.offsetWidth/2; 
 
    var tL = to.offsetLeft + to.offsetWidth/2; 
 
    
 
    var CA = Math.abs(tT - fT); 
 
    var CO = Math.abs(tL - fL); 
 
    var H = Math.sqrt(CA*CA + CO*CO); 
 
    var ANG = 180/Math.PI * Math.acos(CA/H); 
 

 
    if(tT > fT){ 
 
     var top = (tT-fT)/2 + fT; 
 
    }else{ 
 
     var top = (fT-tT)/2 + tT; 
 
    } 
 
    if(tL > fL){ 
 
     var left = (tL-fL)/2 + fL; 
 
    }else{ 
 
     var left = (fL-tL)/2 + tL; 
 
    } 
 

 
    if((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){ 
 
    ANG *= -1; 
 
    } 
 
    top-= H/2; 
 

 
    line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)'; 
 
    line.style["-moz-transform"] = 'rotate('+ ANG +'deg)'; 
 
    line.style["-ms-transform"] = 'rotate('+ ANG +'deg)'; 
 
    line.style["-o-transform"] = 'rotate('+ ANG +'deg)'; 
 
    line.style["-transform"] = 'rotate('+ ANG +'deg)'; 
 
    line.style.top = top+'px'; 
 
    line.style.left = left+'px'; 
 
    line.style.height = H + 'px'; 
 
} 
 
adjustLine(
 
    document.getElementById('div1'), 
 
    document.getElementById('div2'), 
 
    document.getElementById('line') 
 
);

#content{ 
 
    position:relative; 
 
} 
 
.mydiv{ 
 
    border:1px solid #368ABB; 
 
    background-color:#43A4DC; 
 
    position:absolute; 
 
} 
 
.mydiv:after{ 
 
    content:no-close-quote; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    background-color:black; 
 
    width:4px; 
 
    height:4px; 
 
    border-radius:50%; 
 
    margin-left:-2px; 
 
    margin-top:-2px; 
 
} 
 
#div1{ 
 
    left:200px; 
 
    top:200px; 
 
    width:50px; 
 
    height:50px; 
 
} 
 
#div2{ 
 
    left:20px; 
 
    top:20px; 
 
    width:50px; 
 
    height:40px; 
 
} 
 
#line{ 
 
    position:absolute; 
 
    width:1px; 
 
    background-color:red; 
 
}

 

 
<div id="content"> 
 
    <div id="div1" class="mydiv"></div> 
 
    <div id="div2" class="mydiv"></div> 
 
    <div id="line"></div> 
 
</div>