javascript - Multiple drag functions on d3 force drag layout -

मेरे पास निम्न लेआउट है:

• ग्रे बाजू : मुख्य कंटेनर (ज़ूम, पैन)
• श्वेत मंडलियां : डी 3 नोड्स ( मूसुडाउन , माउसप , ड्रैग )
• लाल आयत : आयताकार ( खींचें , कंटेनर पॅनिंग के बिना)

  लाल आयतों को खींचते समय, मैं नहीं चाहता मुख्य कंटेनर को भी खींचें।

  इसके अलावा, ज़ूमिंग करते समय, उन्हें प्रभावित होना चाहिए।

  मुझे लगता है कि यह समस्या इससे संबंधित है:

    // पैन हैंडलर्स कंटेनर के लिए आयत जोड़ें। Parent.append ("rect") .attr ("width", SVGWidth) .attr ("height", SVGHeight)। शैली ("भरना", "कोई नहीं")। शैली ("सूचक -इवेंट्स "," सभी "); <  
     
   
   
   अपने पोस्ट से कोड स्निपेट को ले जाकर  पहले   g  तत्व को स्टार्टर तत्वों में शामिल करने से पहले, यह मुद्दा तय है: 
   
    ... // पैन हैंडलर्स कंटेनर के लिए आयत जोड़ें parent.append (" ("चौड़ाई", एसवीजीवीडथ) .attr ("ऊंचाई", एसवीजीईइट)। शैली ("भरना", "कोई नहीं")। शैली ("सूचक-घटनाएं", "सभी"); // स्टार्टर तत्वों और उनके कंटेनर वार्स स्टार्टर एल्मपैरेंट = कंटेनर पेरेंट.एपेंड ("जी") जोड़ें; ...  
   
   बेला: