React-dnd: एकाधिक तत्वों को खींचने में सहायता

प्राथमिकता नहीं है। ड्रैग सोर्स कीज़ (https://github.com/gaearon/react-dnd/issues/38#issuecomment-73409935) शुरू करने के बाद हम फिर से जा सकते हैं।

मुझे इसमें सड़क के नीचे दिलचस्पी होगी, हालांकि मुझे लगता है कि आप अपने घटक पेड़ के एक हिस्से को एक घटक के साथ लपेटने में सक्षम हो सकते हैं जिसमें ड्रैगसोर्स है ...
जैसे कि यदि आप शिफ्ट रखते हैं और क्लिक करते हैं, तो यह फैलता है कि सरणी के किन वर्गों को ड्रैगइटम या कुछ और में कॉपी किया जाता है?

थोड़े।

पहले हम शून्य component (#38 के लिए आवश्यक) और समान key (#53 के लिए आवश्यक) के साथ एक अलग घटक पास करना सीखते हैं।

फिर हम groupKey जोड़ते हैं जो वैकल्पिक है। key , यह ड्रैग सोर्स में निर्दिष्ट है और एक स्ट्रिंग है। जब आप किसी चीज़ को groupKey साथ खींचना शुरू करते हैं, तो हम न केवल कॉल करने वाले पर beginDrag पर कॉल करेंगे, बल्कि समान groupKey साथ प्रत्येक माउंटेड ड्रैग सोर्स पर कॉल करेंगे, और उनके आइटम्स को इसमें एकत्रित करेंगे। एक सरणी। लक्ष्य विधियों को छोड़ने के लिए हम इन वस्तुओं को item बजाय पास करेंगे। जब ड्रैगिंग खत्म हो जाती है, तो हम आइटम एरे के साथ ड्रॉप टारगेट पर acceptDrop को कॉल करेंगे, और फिर प्रत्येक ड्रैग सोर्स के endDrag को उनके आइटम के साथ कॉल करेंगे।

मजे की बात यह है कि हम कस्टम "समग्र" थंबनेल घटक के साथ DragLayer आकर्षित कर सकते हैं और एक काउंटर जैसा कि मैंने ऊपर स्क्रीनशॉट किया है क्योंकि हम items.length से गिनती जानते हैं।

मेरे मन में जो था, उससे कहीं कम बदसूरत विचार है

:+1: इस सुविधा के लिए :-)

बंद करना, क्योंकि मेरे पास वर्तमान में इसके लिए उपयोग का मामला नहीं है, और यह एक महत्वपूर्ण कार्यान्वयन प्रयास है।

@gaearon

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

जावा/स्विंग में ऐसा करने का तरीका (हालांकि इसमें ड्रैग इमेज के लिए कोई अंतर्निहित समर्थन नहीं था) _पेड़ को स्वयं ड्रैग सोर्स_ बनाना था, और यह तय करने के लिए _योग्य बनाना था कि इसके आधार पर ड्रैग शुरू किया जाना चाहिए या नहीं वर्तमान स्थिति और खींचें प्रारंभ स्थिति_। क्या monitor.getInitialSourceClientOffset() उपलब्ध है जब canDrag और beginDrag को कॉल किया जाता है? लोग निश्चित रूप से इसे उपलब्ध कराना चाहेंगे। वे शायद यह भी चाहते हैं कि संशोधक कुंजियाँ (ctrl, alt, shift) उपलब्ध हों और ड्रैग स्रोतों को निर्दिष्ट करने में सक्षम हों कि उन्हें स्थानांतरित करना है या कॉपी करना है, और यह निर्दिष्ट करने के लिए लक्ष्य छोड़ दें कि क्या वे किसी के आधार पर चाल और/या प्रतिलिपि का समर्थन करते हैं। ये कारक, क्योंकि जावा/स्विंग में यह संभव है और मैं अन्य ढांचे का अनुमान लगा रहा हूं। स्विंग में _ड्रैग जेस्चर पहचानकर्ता_ की अवधारणा भी थी जिसे स्वैप किया जा सकता था।

मैं भविष्यवाणी करता हूं कि सूची में सभी वस्तुओं को अलग-अलग ड्रैगगेबल्स के रूप में इलाज करना सूची घटक एकल ड्रैग स्रोत होने की तुलना में मुश्किल होगा जो यह बताता है कि इसमें किस प्रकार का चयन किया गया है, उसके आधार पर किस प्रकार का ड्रॉप पेलोड/पूर्वावलोकन छवि बनाना है।

इस बात पर भी विचार करें कि एक डेवलपर उस आइटम के क्रम को _बदलना चाहता है जिसे उपयोगकर्ता ने क्लिक किया और खींचा गया आइटम के आधार पर खींचा जा रहा है। मेरा मानना ​​​​है कि विंडोज एक्सप्लोरर इस तरह से व्यवहार करता है।

क्या किसी ने अपने अनुप्रयोगों में प्रतिक्रिया-डीएनडी के साथ कई वस्तुओं को खींचकर लागू किया है? इसके लिए आपका वर्तमान समाधान क्या है?

क्या आपका मतलब सिंगल ड्रैग सोर्स के लिए एकाधिक ड्रॉप लक्ष्य था?

+1 @ danii1 : क्या किसी ने कई वस्तुओं को खींचकर लागू किया है?

मैंने इसे लागू किया, समाधान मूल रूप से पहली पोस्ट में वर्णित है:

1. अपने चुने हुए आइटम का ट्रैक रखें
2. CustomDragLayer लागू करें (https://gaearon.github.io/react-dnd/docs-drag-layer.html देखें) और अपने चयनित आइटम स्वयं प्रस्तुत करें
3. हैंडल ड्रॉप अगर गिरा हुआ आइटम चयन का हिस्सा है

मैंने इसे इसके द्वारा कार्यान्वित किया:

1. एक सेट में चयनित वस्तुओं का ट्रैक रखें
2. इसे डीएनडी स्रोत को एक संपत्ति के रूप में पास करें
3. startDrag में सेट फॉर्म को प्रॉपर से पुनः प्राप्त करें और इसे ड्रैग आइटम के रूप में वापस करें
4. एक कस्टम ड्रैग पूर्वावलोकन बनाएं
5. EndDrag पर सेट के सभी आइटम्स को dnd लक्ष्य में ले जाएँ

इसके लिए मेरे पास थोड़ा अलग उपयोग का मामला है, मुझे लगता है, मैं उन नोड्स को आकर्षित करना चाहता हूं जो किनारों के साथ खींचने योग्य हैं जो खींचने योग्य नहीं हैं लेकिन जब वे स्थानांतरित करने के लिए नोड्स संलग्न होते हैं तो चलते हैं। मेरा वर्तमान कार्यान्वयन एक CustomDragLayer है जो किनारों को खींचता है जब यह पता चलता है कि DraggableNode चल रहा है ( CustomDragLayer पर भी खींचा गया है, लेकिन मुझे लगता है कि इसे एक के रूप में मॉडल करना बेहतर हो सकता है isDragging() साथ ड्रैगसोर्स के रूप में सभी किनारों को लागू करके कई ड्रैग स्थिति को लागू किया गया ताकि यह पता लगाया जा सके कि वे जिस नोड से जुड़े हैं, वह चल रहा है ताकि वे CustomDragLayer निर्देशांक को प्रोप के रूप में इंजेक्ट करने के बजाय खुद को आकर्षित कर सकें .

@ danii1
क्या आप कृपया उस संदर्भ को साझा कर सकते हैं जिसे आपने संदर्भ के लिए लागू किया है

मैं एक पोस्ट लिखूंगा और प्रतिक्रिया-डीएनडी + रेडक्स के साथ एकाधिक और नेस्टेड ड्रैग और ड्रॉप के बारे में रेपो जोड़ूंगा।

@nayemmajhar , यह बहुत अच्छा होगा

@nayemmajhar इसके साथ एक उदाहरण पर कोई अपडेट?

मैंने बहुत पहले reduxJS के साथ प्रतिक्रिया डीएनडी का उपयोग करके इस एप्लिकेशन को विकसित किया है https://www.joomshaper.com/page-builder मैं एक ट्यूटोरियल लिख रहा हूं लेकिन समय प्रकाशित करने की आवश्यकता है

@serle क्या आप एक कोड उदाहरण साझा कर पाएंगे कि आपने यह कैसे किया?

@ianmclean2011 इसे यहां देखें: https://github.com/react-dnd/react-dnd/issues/590

मैं यहाँ क्रमबद्ध उदाहरण के समान उदाहरण में मल्टी-ड्रैग को लागू करने का प्रयास कर रहा हूँ: https://react-dnd.github.io/react-dnd/examples-sortable-simple.html। मैं किसी भी वस्तु का चयन करने में सक्षम होना चाहता हूं, और फिर उन्हें एक इकाई के रूप में सूची में ऊपर और नीचे ले जाना चाहता हूं। मुझे ऐसा करने के लिए ऊपर साझा किए गए उदाहरणों/जानकारी का उपयोग करने के तरीके के बारे में अपना सिर लपेटने में परेशानी हो रही है। यह कैसे काम कर सकता है इस पर कोई विचार/विचार/प्रतिक्रिया?

अगर किसी की दिलचस्पी है, तो मैंने एकाधिक ड्रैग/ग्रिड व्यू लागू किया: https://codesandbox.io/s/9j897k0mwy।
आप कई मदों का चयन करने के लिए cmd/ctrl और Shift कुंजियों का उपयोग कर सकते हैं, फिर उन्हें ग्रिड के चारों ओर खींचकर कहीं भी सम्मिलित कर सकते हैं।

यह अभी भी एक डेमो है, लेकिन मैं कोड को थोड़ा और सार कर सकता हूं और बाद में इसे एक घटक में पैकेज कर सकता हूं।

@melvynhills क्या आपने ऐसे समाधान की जांच की है जिसके लिए प्रत्येक कार्ड घटक में सभी चयनित कार्ड पास करने की आवश्यकता नहीं है? मुझे नहीं लगता कि कार्ड के startDrag() को सभी चयनित कार्डों के संदर्भ की आवश्यकता पर विचार करने का कोई समाधान है।

@jmcrthrs नहीं, प्रतिक्रिया-डीएनडी एपीआई के साथ यह मेरे लिए संभव नहीं लगता है। मुझे नहीं लगता कि खींचने से पहले यह जानने का कोई तरीका है कि कौन सी विशिष्ट वस्तु खींची जा रही है। यह जानने का भी एकमात्र तरीका है कि क्या खींचा गया आइटम आपके द्वारा किए गए एकाधिक चयन के भीतर है, या यदि यह उस चयन से बाहर है जिसे हमें बदलने की आवश्यकता है।

@melvynhills @jmcrthrs अन्य डेस्कटॉप dnd फ्रेमवर्क जिनका मैंने उपयोग किया है, प्रत्येक व्यक्तिगत पंक्ति, सेल, आइटम आदि को अपना स्वयं का ड्रैग स्रोत और/या ड्रॉप लक्ष्य बनाने के बजाय ड्रैग सोर्स/ड्रॉप लक्ष्य बनाने पर भरोसा करते हैं। कई वस्तुओं को खींचने के लिए कार्यान्वयन, साथ ही सूची या तालिका के भीतर विशिष्ट ड्रॉप स्थान प्राप्त करना, इस तरह से बहुत साफ हो जाता है। जब कोई सूची ड्रैग स्टार्ट इवेंट प्राप्त करती है तो वह केवल अपने वर्तमान चयनित आइटम को देख सकती है।

@ jedwards1211 क्या आपको लगता है कि यह इस पुस्तकालय के साथ करने योग्य है? विशेष रूप से किसी आइटम को खींचना शुरू करने का उपयोग-मामला जो ड्रैग शुरू होने से पहले नहीं चुना गया था। मुझे यकीन नहीं है कि प्रतिक्रिया-डीएनडी काम करने का तरीका है।

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

संपादित करें: इसके लिए एक अलग मुद्दा बनाया https://github.com/react-dnd/react-dnd/issues/1650

@melvynhills शायद अगर एक mousedown हैंडलर आइटम चयन को ट्रिगर करता है (जो आपको करना चाहिए, डीएनडी के साथ सभी सॉफ़्टवेयर मैंने इस तरह से काम किया है), यह कंटेनर घटक के ड्रैग होने के लिए रिएक्ट डीएनडी के साथ ठीक काम करेगा स्रोत, क्योंकि ड्रैग इवेंट mousedown बाद आएंगे।

क्या आपने ऐसे समाधान की जांच की है जिसके लिए प्रत्येक कार्ड घटक को सभी चयनित कार्ड पास करने की आवश्यकता नहीं है?

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

क्या किसी ने अपने अनुप्रयोगों में प्रतिक्रिया-सुंदर-डीएनडी के साथ कई वस्तुओं को खींचकर लागू किया है? इसके लिए आपका वर्तमान समाधान क्या है?