web-dev-qa-db-fra.com

Comment connecter des divs HTML avec des lignes?

Sur ma page, j’ai un ensemble d’éléments div qui doivent être reliés par des lignes, comme je l’ai montré dans l’image ci-dessous. Je sais qu'avec une toile, je peux tracer des lignes entre ces éléments, mais est-il possible de le faire d'une autre manière en html/css?

enter image description here

javascriptjqueryhtmlcss
50
confile

Vous pouvez utiliser des SVG pour connecter deux div en utilisant uniquement HTML et 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>

(veuillez utiliser un fichier css séparé pour le style)

Créez une ligne svg et utilisez cette ligne pour connecter les divs ci-dessus

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

où,

x1, y1 indique le centre de la première div et
x2, y2 indique le centre de la deuxième division

Vous pouvez vérifier son apparence dans l'extrait ci-dessous.

<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>
44
Ani

Vous pouvez utiliser https://github.com/musclesoft/jquery-connections . Cela vous permet de connecter des éléments de bloc dans DOM.

20
user2900150

j'ai fait quelque chose comme ça pour mon projet

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>
19
Rodrigo Damasceno

C'est un peu pénible de se positionner, mais vous pouvez utiliser 1px large divs comme des lignes et les positionner et les faire pivoter correctement.

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);
}
13
James Montagne

Certainement possible avec n'importe quel nombre de bibliothèques et/ou de technologies HTML5. Vous pourriez peut-être pirater quelque chose ensemble en CSS pur en utilisant quelque chose comme la propriété border-bottom, mais ce serait probablement horriblement hacky.

Si vous êtes sérieux à ce sujet, vous devriez jeter un coup d'œil à une bibliothèque JS pour le dessin sur toile ou au format SVG. Par exemple, quelque chose comme http://www.graphjs.org/ ou http://jsdraw2dx.jsfiction.com/

2
LiavK

Check my fiddle from this thread: Tracez une ligne reliant deux colonnes div cliquées

La présentation est différente, mais l’idée est de créer des div invisibles entre les cases et d’ajouter les bordures correspondantes avec jQuery (la réponse n’est que HTML et CSS)

2
oneday

Créez un div qui est la ligne avec le code comme ceci:

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>

Cela affichera un bloc avec une ligne horizontale vers un autre bloc.

Sur les appareils mobiles, vous pouvez utiliser (caniuse.com/transforms2d)

2
123