Desenhar linha entre divs linkadas

[anthraxxxxxxx 56]

Estou pesquisando por um plugin ou elemento de css/html que literalmente, desenhe um linha ligando divs.

Exemplo:

<div id='1' class='div_3'>

<div id='2' class='div_3'>

<div id='3'>

<div id='4'>

 

O que eu quero é algum modo de desenhar uma linha ligando as divs #1 e #2 com a div #3, achei alguns plugins, mas são coisas com muito mais do que o necessário, e todos com drag & drop, e não preciso de mais nada além desenhar a linha.

 

Se alguém souber de algo que possa servir de exemplo agradeço.

[Giovani 104]

@AnthraxisBR ... fiquei confuso com sua dúvida. Tem algum exemplo online ou você explicar melhor?

[anthraxxxxxxx 56]

10 minutos atrás, Giovani disse:

@AnthraxisBR ... fiquei confuso com sua dúvida. Tem algum exemplo online ou você explicar melhor?

 

Eu esqueci de colocar o código na tag, obrigado!

 

É mais ou menos algo como isso:

 

 

Eu não consegui achar nenhum exemplo, o que acontece é o seguinte:

 

Eu tenho 4 camadas de menus, agora, enquanto o usuário navega entre os menus, eu escureço o botão que seria relacionado a onde ele está, mas da segunda para a terceira camada, são muitas opções pequenas e iguais para todos os menus um nível acima, e acaba confundindo o usuário, eu queria fazer com que saísse uma linha do botão selecionado no nível de menu secundário, e essa linha se ligasse com os botões do menu terciário.

 

PS: O nome da pergunta e o exemplo tão como divs, mas os elementos na verdade são listas <ul>.

 

[Giovani 104]

Hummmmm ... tipo um organograma? Algo como "jquery organogram" no Google 

[marsolim 110]

não era melhor fazer dropdown? fica mais organizado na tela e mais fácil para o usuário se orentar

[anthraxxxxxxx 56]

17 minutos atrás, marsolim disse:

não era melhor fazer dropdown? fica mais organizado na tela e mais fácil para o usuário se orentar

 

Até tentei deixar com dropdown, mas a navegação entre os menus terciários e quaternários é muito constante, exemplo:

 

O usuário usando a opção 3 do menu terciário precisa constantemente mudar para opção 2 desse mesmo menu, ou 1, se eu mantenho o nível terciário dentro de um dropdown do secundário fica muito ruim de operar (estava assim antes, eu retirei pois os operadores reclamaram que estava ruim de navegar).

 

E também não da pra usar o dropdown pq existem opções de menu ao clicar com o botão direito do mouse, como 'abrir opção em modal', ou 'abrir em nova aba', mas não pelo navegador, e sim internamente.

 

 

[anthraxxxxxxx 56]

Ae, consegui resolver, ainda não deixei visual, mas talvez seja útil:

 

//Botão da camada para onde a linha irá
$(document).on('click', '.fiscal_second_layer_content_menu_open_func', function () {
    $this = $(this);
  	//Pegando a posição do botão da camada anterior de menus, de onde a linha irá sair.
 	var element_1_left = $('.fiscal_first_layer_content_menu_open_func:active').offset().left;
    var element_1_top = $('.fiscal_first_layer_content_menu_open_func:active').offset().top;
    //Pegando a posição do botão da camada secundário, para onde a linha irá ir.
  	var element_2_left = $this.offset().left;
    var element_2_top = $this.offset().top;
  	//O menu da esquerda é auto-size, então preciso diminuir ele da posição final da linha.
    var reduce_left = $('.sidebar-container').width();
  	//Calculando a posição x. OBS 22 são os pixels que devem ser acrescentados a direita de dentro da .row da linha
	var x_1 = element_1_left - (reduce_left - 22);
	var x_2 = element_2_left - (reduce_left - 22);
  	//Calculando o valor de y. OBS: 50 são os pixels da altura do menu primário.
  	var y_1 = element_1_top - 50;
    var y_2 = element_2_top - 50;
    //Insere a linha na .row .line_link, que está entre as camadas primaria e secundária. 
    $('.line_link').html('<svg style="z-index:0" height:5px; width:5px;><line x1="'+ x_1 +'" y1="' + y_1 +'" x2="' + x_2 +'" y2="' + y_2  +'" stroke="black"/></svg>');
})

 

 

A linha é posicionada assim, de acordo com qual botão eu estou do menu primário, e de qual eu cliquei no menu secundário, só preciso colocar a linha atrás do botão primário e fica 100% kk: