ड्रैगगेबल divs को कैसे कनेक्ट करें

Question

मेरे पास कुछ divs हैं जो मैं क्लोन करता हूं और एक क्षेत्र में खींच और छोड़ सकता हूं, अब, मैं divs लाइनों से कनेक्ट करना चाहता हूं और यदि मैं divs को स्थानांतरित करता हूं, तो यह लाइन भी आगे बढ़नी चाहिए। प्रवाह आरेख की तरह कुछ, मैंने ड्रैग और ड्रॉप का उपयोग करके divs को क्लोन किया, लेकिन अभी भी यह नहीं पता कि यह लाइन कैसे करें।

धन्यवाद!

Answer 1

मैंने पहले इस बारे में सोचा है लेकिन मुझे वास्तव में इसे लागू करने की कोशिश करने की आवश्यकता नहीं है। इसे आज़माएं:

एक पारदर्शी जीआईएफ या पीएनजी बनाएं जिसमें एक कोने से दूसरे में चलने वाली एक विकर्ण रेखा है। जैसे ही आप चारों ओर divs खींचते हैं, छवि को खींचें ताकि यह कोनों को हमेशा प्रत्येक div को छू रहे हों। आपको शायद एक विकर्ण-नीचे छवि और एक विकर्ण-अप छवि की आवश्यकता होगी और दो divs के सापेक्ष स्थिति के आधार पर दोनों के बीच स्विच करें।

शायद यह अच्छी तरह से काम करने के लिए कुछ उत्सुकता लेगा, लेकिन यह सबसे अच्छी चीज है जिसे मैं HTML में विकर्ण रेखाएं प्राप्त करने के बारे में सोच सकता हूं।

Answer 2

• दो divs, दिवा और divB ले।

• divs के निकटतम सीमाओं के बीच कम से कम दूरी की गणना

• प्रत्येक div जैसे उन लोगों के निकटतम पक्षों के बीच निर्देशांक निर्धारित:

  एक: {x: 10, वाई: 10}

  बी: {x: 20: y: 10}

• उन बिंदुओं (सी) सी = कुल्हाड़ी, द्वारा या AY, BX से लाइनों के चौराहे सूत्री निर्धारित (निर्भरता डिंग दिवा और divB पदों पर)

• दो divs, कि एसी और ईसा पूर्व

  को दर्शाती हैं

टिप:

position:absolute; 
line-height:1px; 
border:solid 1px; 

रीपेंट हर बार जब आप jQuery के साथ divs चलते हैं।

नोट: जैसा कि आप देख सकते हैं, हमेशा 2 पक्ष बंद होते हैं और 2 पक्ष दूर होते हैं जब divs समानांतर नहीं होते हैं।

Answer 3

आप इसे प्राप्त करने के लिए jsplumb लाइब्रेरी का उपयोग कर सकते हैं। यदि आपके पास दो divs, div1 और div2,

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions); 
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions); 
jsPlumb.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
    connector: [ "Bezier", 175 ], 
    paintStyle:{ lineWidth:5, strokeStyle:'red' } 
}); 

यह कनेक्टर स्थापित करना चाहिए। https://jsplumbtoolkit.com Jsplumb बन अब भुगतान किया है लगता है, (ऊपर संशोधित लिंक) - अगर आपकी divs चल संपत्ति है, तो onmove, jsPlumb.repaint के लिए एक कॉल()

jsPlumb डेमो के लिए लिंक कर सकते हैं। हालांकि वे एक Community Edition

समुदाय संस्करण है यह खुला स्रोत jsPlumb परियोजना GitHub पर होस्ट की है कि पहले 2010 की शुरुआत में बनाया गया था।यह एक व्यू लेयर टेक्नोलॉजी है जो आपको प्रोग्रामिंग और माउस/टच इवेंट्स के माध्यम से, डीओएम तत्वों के बीच कनेक्टिविटी स्थापित करने के लिए एक एपीआई प्रदान करती है।

सामुदायिक संस्करण निःशुल्क है, और इसे एमआईटी या जीपीएल 2 लाइसेंस के साथ लाइसेंस प्राप्त है; आप अपनी आवश्यकताओं के अनुरूप जो भी चुनते हैं।

टूलकिट संस्करण टूलकिट संस्करण अंतर्निहित डेटा मॉडल पर ध्यान देने के साथ ही साथ इस तरह के लेआउट के रूप में कई उपयोगी यूआई सुविधाओं, और एक विजेट है कि पैन/ज़ूम कार्यक्षमता प्रदान करता है के साथ समुदाय संस्करण गिर्द घूमती है। यह अपने मूल पर दृश्य कनेक्टिविटी के साथ अनुप्रयोगों का निर्माण करने का एक तेज़ तरीका प्रदान करता है। टूलकिट संस्करण की क्षमताओं के लिए बेहतर महसूस करने के लिए, कुछ डेमो के माध्यम से देखें या दस्तावेज़ीकरण को समझें।

टूलकिट संस्करण में एक वाणिज्यिक, प्रति-डेवलपर, ईमेल समर्थन के लिए वैकल्पिक पहुंच के साथ लाइसेंस है (साथ ही वर्ष के लिए नए रिलीज़ किए गए संस्करणों के अपडेट)। लाइसेंस शर्तें यहां उपलब्ध हैं। इस फ़ॉर्म का उपयोग करके अभी कूदने और लाइसेंस खरीदने के लिए स्वतंत्र महसूस करें!

दोनों संस्करणों के लिए रोडमैप here देखे जा सकते हैं।