リスト間に矢印を描く

Question

強調表示された2つのリスト項目の間に矢印を動的に描く方法はありますか？

私は「アイテム2」の上に浮かんだのであれば、それはこの（しかし、ストレート矢印）を行うだろう：

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

これは私が数分前にここに着いた答えからコードです：

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

ここで2D図面を使用する必要はありません。これをチェックしてください：http://jsfiddle.net/vjYuW/ 私はちょうどあなたが上に投稿したフィドルをフォークし、更新しました。CSS

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

：

... 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;  
} 

HTML：ここ

が不可欠コードで、それは1つのピクセル幅や線を描く背の高い3つのdiv要素を処理します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"); 
}); 

注：あなたはおそらく、すべてのブラウザをサポートするために、それを少し微調整する必要があります - 私はIE6 &株式会社

Answer 2

私はこのようなもののために、Vector Draw Libraryのようなサードパーティ図面ライブラリを使いたいと思うかもしれません。

リンクからライブラリをダウンロードしてアプリに追加することができます。その後：

は、ページ上でそれを含める：あなたはホバー機能で行を削除するコードを記述する必要があります

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

注：

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

は、その後、あなたのホバー機能に追加しますさもなければそれが描かれたらそれは残るでしょう。また、offset()を使用して、リスト内のアイテムの位置を計算しています。これはうまくいくはずですが、右に見えるように少し微調整する必要があるかもしれません。

上記のコードは機能しますが、完全ではありません。おそらく、ホバーの2番目の機能は、キャンバス上でclear()と呼ぶことができます。ここのキャンバスは、2つのリストを囲む囲むdivです。

Answer 3

これを達成するには、HTML5 canvas要素を使用できます。

これが最良の方法であるかどうかはわかりませんが、私は周りをくまなく見て、thisを得ました。

私がしたことは、最初にリストをdivで囲んだことです。 divはCSSでスタイル付けされているため、相対的な位置になります。これは、jQueryを使用してポジションを取得したときのポジションです。次に、リストの前にキャンバスを置き、ポインタイベントを無効にします。キャンバスの高さをリストの高さに合わせるために何かを追加しました。その後、私はホバーのための別のハンドラを追加しました。その上にマウスを置くと、矢印が描かれます。マウスを動かしてキャンバスをクリアします。

矢印を描くのはかなり簡単です。まず、アイテムの位置を取得します。次に線を引いて数学を使って矢印の向きを決めます。ポジションを取得するのはかなり簡単です。適切なリストについては、positionメソッドを使用することができます。左のリストでは、一時的にspanを作成し、それをリスト項目に追加して、その位置を取得しました。

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