ड्रैगगेबल और ड्रॉपपेबल के बीच एक रेखा कैसे आकर्षित करें?

Question

मैं "मैपिंग" करने के लिए उत्कृष्ट JQuery UI का उपयोग कर रहा हूं ताकि उपयोगकर्ता एक प्रोग्राम से अन्य कार्यक्रमों के व्यक्तियों को व्यक्तियों को "मानचित्र" कर सके।

इस सरल JQuery का उपयोग कर:

$(document).ready(function() { 
    $("div .draggable").draggable({ 
     revert: 'valid', 
     snap: false 
    }); 

    $("div .droppable").droppable({ 
     hoverClass: 'ui-state-hover', 
     helper: 'clone', 
     cursor: 'move', 
     drop: function(event, ui) { 
      $(this) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(this).droppable('disable'); 

      $(ui.draggable) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(ui.draggable).draggable('disable'); 
     } 
    }); 

    $("div .droppable").bind("dblclick", function() { 
     $(this) 
      .removeClass('ui-state-highlight') 
      .find("img") 
      .removeAttr("src") 
      .attr("src", "_assets/img/icons/user-48x48.png"); 
     $(this).droppable('enable'); 

     EnableSource($(this)); 
    }); 
}); 

मैं इस पर कैसे पहुंचेंगे:

क्या मैं वास्तव में (यदि संभव हो) के बीच एक रेखा एल्सा बनाने चाहते थे था और Kjell इसलिए यह उनके बीच कनेक्शन स्पष्ट करता है।

मैं हमेशा बॉक्स के अंदर संख्याओं के साथ ऐसा कर सकता हूं, लेकिन मैं वास्तव में जानना चाहता था कि लाइनों का उपयोग करके इसे कैसे किया जाए।

धन्यवाद।

Answer 1

• अद्यतन (08.Jul.2013) पुस्तकालयों के नवीनतम संस्करण के साथ अपडेट किया; जेएसआरएंडर का उपयोग कर एचटीएमएल रिफैक्टर;
• अपडेट किया गया (2 9। एसपी.2011) जोड़ा गया जीआईटी रिपो; कोड साफ किया; नवीनतम ढांचे संस्करणों के लिए अद्यतन;
• अपडेट किया गया (03.Mar.2013) कामकाजी उदाहरण के साथ निश्चित लिंक;

वर्तमान उदाहरण का उपयोग करता है:

• एचटीएमएल 5 doctype
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 (वैकल्पिक, HTML सरलीकरण के लिए उपयोग किया जाता है)

स्रोत

Source code in Git Repository

डेमो

Page demo at JSBIN

---

वर्क्स पर एफएफ, आईई, क्रोम, सफारी और ओपेरा।

पर परीक्षण किया:

• फ़ायरफ़ॉक्स 6 और 7 .. 22
• आईई 8 और 9 .. 10
• क्रोम 12+ .. 27
• सफारी 5 + .. 6
• ओपेरा 11.51 .. 15

आपको सभी को दिखाने के लिए, मैंने अभी अपनी उपलब्धि का थोड़ा सा डेमो बनाया है (मुझे प्रति गर्व है बेटा आज):

Video demo

और एक छोटे से छवि:

Answer 2

मैं एक लिंक पोस्ट करने के लिए भी नया कर रहा हूँ, लेकिन यदि आप सरल ड्राइंग के लिए लाइब्रेरी गूगल " jQuery के साथ ", आप जो खोज रहे हैं वह आपको मिल सकता है। :)

link here