Dibujar flecha entre listas

Question

¿Hay alguna forma de dibujar dinámicamente una flecha entre los dos elementos de la lista resaltados?

Así que si yo aleteaba por encima de "Artículo 2" sería hacer esto (pero una flecha recta):

Item 1   Highlight 3 
Item 2-----\  Highlight 1 
Item 3  ----->Highlight 2 

Este es el código de la respuesta que obtuve aquí hace unos minutos:

Highlight item in two lists when mouseover

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 
}); 

jsFiddle: http://jsfiddle.net/e37Yg/1/

<ul class="list1"> 
    <li id="qq1">sdfsdv</li> 
    <li id="qq2">bnvnvb</li> 
    <li id="qq3">nmnutymnj7</li> 
    <li id="qq4">cvbc</li> 
    <li id="qq5">45tsgd</li> 
</ul> 

<ul class="list2"> 
    <li id="aa3">fgtbrtgb</li> 
    <li id="aa1">vbn xgbn</li> 
    <li id="aa5">vdgver</li> 
    <li id="aa4">asdasdv</li> 
    <li id="aa2">nvfbnfn</li> 
</ul> 

Answer 1

No tiene que usar el dibujo 2D aquí. Mira esto: http://jsfiddle.net/vjYuW/ Acabo de abrir y actualizar el violín que has publicado arriba.

Este es el código esencial, que maneja 3 DIV 1 píxel de ancho o alto para dibujar las líneas:

HTML:

...left list... 
<div id="segment1" class="hline"></div> 
<div id="segment2" class="vline"></div> 
<div id="segment3" class="hline"></div> 
...right list... 

CSS:

... formatting for ULs here, both have to be float:left... 

.highlight { background-color: red; } 

.hline {  
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 7em; 
} 

.vline { 
    display:block; 
    position:relative; 
    float:left; 
    height: 1px; 
    width: 1px;  
} 

JavaScript:

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    var leftY = $('#qq' + n).position().top; 
    var rightY = $('#aa' + n).position().top; 
    var H = Math.abs(rightY-leftY); 
    if (H == 0) H = 1; 
    $('#segment1').css('top',leftY+'px'); 
    $('#segment3').css('top',rightY+'px'); 
    $('#segment2').css('top',Math.min(leftY,rightY)+'px'); 
    $('#segment2').css('height',H+'px'); 
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight"); 
}); 

Nota: es probable que tenga que ajustar un poco para apoyar a todos los navegadores - Yo no la salida IE6 & Co.

Answer 2

Creo que para algo como esto es posible que desee utilizar una biblioteca de dibujo de terceros como Vector Draw Library.

Puede descargar la biblioteca desde el enlace y agregarla a su aplicación. Entonces:

incluirlo en su página:

<script type="text/javascript" src="wz_jsgraphics.js"></script> 

A continuación, añada a su función de elemento emergente:

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 

    //canvas is your drawing div 
    var jg = new jsGraphics("canvas"); 
    jg.drawLine($("#qq" + n).offset().left + 30, $("#qq" + n).offset().top , $("#aa" + n).offset().left, $("#aa" + n).offset().top); 
    jg.paint(); 

Tenga en cuenta que tendrá que escribir el código para eliminar la línea en la función de la libración de lo contrario, una vez que se dibuja, permanecerá. Además, estoy usando offset() para calcular la posición de los elementos en la lista. Esto debería funcionar, pero puede que tenga que modificar un poco para que se vea bien.

El código anterior funciona pero no está completo. Tal vez la segunda función en el elemento emergente puede llamar al clear() en el lienzo. El lienzo aquí es el div circundante que encierra las dos listas.

Answer 3

Puede usar el elemento HTML5 canvas para lograr esto.

No estoy seguro de si esta es la mejor manera de hacerlo, pero jugueteé y obtuve this.

Lo que hice fue lo primero que encerré las listas en un div. El div tiene un estilo con CSS para tener una posición relativa. Esto es así cuando consigas el puesto con jQuery, te dará una posición relativa a eso. A continuación, puse un lienzo delante de las listas y deshabilité los eventos de puntero en él. También agregué algo para ajustar la altura del lienzo a la altura de las listas. Luego agregué otro controlador para el vuelo estacionario. Cuando pasas el cursor sobre ella, dibujará la flecha, y cuando pasas el cursor hacia afuera, se borrará el lienzo.

Dibujar la flecha es bastante simple. Primero obtiene las posiciones de los artículos. Luego traza una línea y usa algunas matemáticas para orientar la flecha. Para obtener las posiciones es bastante fácil. Para obtener la lista correcta, solo puede usar el método position. Para la lista de la izquierda, creé un span temporal y lo agregué al elemento de la lista, y luego obtuve la posición de eso.

Answer 4

<script src='www.walterzorn.de/en/scripts/wz_jsgraphics.js'> </script> 

function drawLine(element1, element2) { 
    var jg = new jsGraphics("renderGraph"); 
    var ele1 = document.getElementById(element1); 
    var ele2 = document.getElementById(element2); 
    jg.setColor("#DDD"); 
    jg.setStroke(5); 
    jg.drawLine(ele1.offsetLeft + ele1.offsetWidth/2 , ele1.offsetTop + ele1.offsetHeight/2, ele2.offsetLeft + ele2.offsetWidth/2, ele2.offsetTop + ele2.offsetHeight/2); 
    jg.paint(); 
}