सूचियों के बीच तीर खींचे

Question

क्या दो हाइलाइट किए गए सूची आइटमों के बीच गतिशील रूप से तीर खींचने का कोई तरीका है?

तो अगर मैं "आइटम 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

आपको यहां 2 डी ड्राइंग का उपयोग करने की आवश्यकता नहीं है। इसे देखें: http://jsfiddle.net/vjYuW/ मैंने अभी ऊपर पोस्ट की गई पहेली को फोर्क और अपडेट किया है।

एचटीएमएल:

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

यहाँ आवश्यक कोड, यह लाइनों आकर्षित करने के लिए विस्तृत या लंबा 3 DIVs 1 पिक्सेल संभालती है जावास्क्रिप्ट:

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

नोट: आप शायद यह सभी ब्राउज़रों का समर्थन करने के एक छोटे से tweak करना होगा - मैं जांच नहीं 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() का उपयोग कर रहा हूं। यह काम करना चाहिए लेकिन आपको सही दिखने के लिए थोड़ा सा बदलाव करना पड़ सकता है।

उपर्युक्त कोड काम करता है लेकिन पूरा नहीं हुआ है। होवर में दूसरा फ़ंक्शन कैनवास पर clear() पर कॉल कर सकता है। कैनवास यहां संलग्न div है जो दो सूचियों को संलग्न करता है।

Answer 3

आप इसे प्राप्त करने के लिए HTML5 canvas तत्व का उपयोग कर सकते हैं।

मुझे यकीन नहीं है कि यह करने का यह सबसे अच्छा तरीका है, लेकिन मैं चारों ओर झुका हुआ और this मिला।

मैंने जो किया वह पहले मैंने div में सूचियों को संलग्न किया था। div सीएसएस के साथ एक सापेक्ष स्थिति रखने के लिए स्टाइल किया गया है। ऐसा इसलिए होता है जब आप 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(); 
}