Disegna una freccia tra gli elenchi

Question

Esiste un modo per disegnare dinamicamente una freccia tra le due voci dell'elenco evidenziato?

Quindi, se ho aleggiava "Articolo 2" sarebbe fare questo (ma una freccia dritta):

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

Questo è il codice della risposta che ho ricevuto qui poche ore fa:

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

Non è necessario utilizzare il disegno 2D qui. Controlla questo: http://jsfiddle.net/vjYuW/ Ho appena biforcato e aggiornato il violino che hai postato sopra.

Ecco il codice essenziale, gestisce 3 DIV 1 pixel di larghezza o altezza per disegnare le linee:

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: probabilmente si dovrà modificarlo un po 'per supportare tutti i browser - Non ho controllato IE6 & Co.

Answer 2

Penso che per qualcosa di simile potresti voler utilizzare una libreria di disegno di terze parti come Vector Draw Library.

È possibile scaricare la libreria dal collegamento e aggiungerla alla propria app. Poi:

includerlo nella tua pagina:

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

Quindi aggiungere alla funzione hover:

$(".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(); 

noti che si dovrà scrivere il codice per rimuovere la riga nella funzione hover altrimenti una volta estratto resterà. Inoltre, sto usando offset() per calcolare la posizione degli articoli nell'elenco. Questo dovrebbe funzionare ma potrebbe essere necessario modificarlo un po 'per farlo sembrare corretto.

Il codice sopra riportato funziona ma non è completo. Forse la seconda funzione in hover può chiamare clear() sulla tela. Canvas qui è il div allegato che racchiude le due liste.

Answer 3

È possibile utilizzare l'elemento HTML5 canvas per ottenere ciò.

Non sono sicuro se questo è il modo migliore per farlo, ma mi sono divertito e ho ottenuto this.

Quello che ho fatto è il primo che ho allegato gli elenchi in un div. Lo div è in stile con CSS per avere una posizione relativa. Questo è così quando si ottiene la posizione con jQuery, darà una posizione relativa a questo. Successivamente, metto una tela davanti agli elenchi e gli eventi del puntatore disabilitati su di essa. Ho anche aggiunto qualcosa per regolare l'altezza della tela all'altezza degli elenchi. Quindi ho aggiunto un altro gestore per il passaggio del mouse. Quando passi il mouse su di esso, si disegna la freccia, e quando si passa il mouse, si cancella la tela.

Per disegnare la freccia è abbastanza semplice. Prima ottiene le posizioni degli oggetti. Quindi disegna una linea e usa alcuni calcoli per orientare la freccia. Per ottenere le posizioni è abbastanza facile. Per l'elenco corretto, è sufficiente utilizzare il metodo position. Per la lista di sinistra, ho creato uno span temporaneo e l'ho aggiunto alla voce di elenco, e poi ho ottenuto la posizione di quello.

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(); 
}