React-dnd: रिएक्ट डीएनडी का उपयोग कौन करता है?

• परियोजना: https://github.com/WikiEducationFoundation/WikiEduDashboard
• उपयोगिता: बहुत
• मुद्दे: राज्य द्वारा संचालित एनिमेशन सबसे कठिन हिस्सा थे। मैं प्रतिक्रिया-गति और प्रतिक्रिया सीएसएस संक्रमण समूहों के संयोजन के साथ समाप्त हुआ। तब मुझे उन चीजों के लिए अतिरिक्त राज्य का प्रबंधन करना पड़ा जो कि मध्य-एनिमेशन थे ताकि उन्हें एनिमेट करते समय ड्रॉप लक्ष्य होने से रोका जा सके। मैंने https://github.com/yahoo/react-dnd-touch-backend का उपयोग करके समाप्त किया, जिसमें इसके अपने मुद्दे थे (पाठ को ड्रैग के दौरान चुना जा रहा था) लेकिन अधिक नियंत्रणीय _during_ एनिमेशन था। मैंने शायद इस सुविधा पर ~ 4 ​​कार्य दिवस बिताए और एनिमेशन को सही तरीके से प्राप्त किया, जो शायद एक गैर-प्रतिक्रिया ऐप में काफी कम समय लेता।

_- आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?_

मैं इसे विभिन्न ऐप्स (कानबन बोर्ड, व्यावसायिक अनुप्रयोगों की पंक्ति) पर उपयोग कर रहा हूं

_- आपको यह कितना उपयोगी लगता है?_

रिएक्ट डीएनडी से पहले, मैंने उन सभी डीएनडी समाधानों की कोशिश की है जो मुझे मिल सकते हैं, दोनों प्रतिक्रिया और jQuery आधारित हैं, और रिएक्ट डीएनडी मील आगे आता है।

_- आपको इससे कितनी बार परेशानी होती है, और वे कितने निराश होते हैं?_

1.0 के बाद से, मुझे कोई समस्या नहीं आई है। ध्यान देने योग्य बात यह है कि मैं अपने उत्पादों पर केवल आधुनिक ब्राउज़र का समर्थन कर रहा हूं।

_- आप किन विशेषताओं की परवाह करते हैं?_

मैं विभिन्न क्षेत्रों में विभिन्न संयोजनों में सभी सुविधाओं का उपयोग कर रहा हूं।

_- क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?_

मैंने कल इसे एक निजी परियोजना के साथ एकीकृत किया (मैं अभी स्क्रीन नहीं दे सकता, क्षमा करें), और मुझे मौजूदा दस्तावेज़ीकरण शानदार लगा। दृष्टिकोण स्वच्छ, समझने में आसान, वृद्धि करने में सरल और समग्र रूप से अनुकूल है।

मुझे वास्तव में किट के साथ किसी भी समस्या का सामना नहीं करना पड़ा है, ईमानदारी से। मुझे लगता है कि इसकी सादगी वास्तव में सबसे बड़ी विशेषता है, साथ ही यह उन लोगों को प्रोत्साहित करती है जो इसका उपयोग एचओसी जैसी सर्वोत्तम प्रथाओं की ओर बढ़ने के लिए करते हैं।

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

हम इसे ट्रेजर डेटा पर अपने नए वेब कंसोल में उपयोग करते हैं। मैंने इसे निजी परियोजनाओं के लिए भी इस्तेमाल किया है।

आप इसे कितना उपयोगी पाते हैं?

बहुत उपयोगी। यह आसानी से सबसे अच्छा ड्रैग एंड ड्रॉप लिब है जिसका मैंने उपयोग किया है। मुझे पूरा विश्वास है कि इसका उपयोग परिष्कृत ड्रैग एंड ड्रॉप इंटरैक्शन को आसानी से लागू करने के लिए किया जा सकता है।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

हर बार जब मैं पुस्तकालय का उपयोग करता हूं, तो मुझे यह याद रखने में थोड़ा समय लगता है कि यह सब एक साथ कैसे आता है: प्रत्येक भाग कहाँ जाता है और यह क्या करता है। कई बार इसका इस्तेमाल करने के बाद भी ऐसा होता है।

शायद सभी भागों को दिखाने के लिए एक विज़ुअलाइज़ेशन होने से याद रखना आसान हो जाएगा।

कुल मिलाकर, ऐसा लगता है कि पुस्तकालय वह सब कुछ करता है जो मुझे करने की आवश्यकता है।

आप किन विशेषताओं की परवाह करते हैं?

टेस्टेबिलिटी! ड्रैग एंड ड्रॉप के साथ मेरे पिछले अनुभव खराब थे, और किसी ने भी उनके ड्रैग एंड ड्रॉप संबंधित कोड का परीक्षण नहीं किया।

मैंने किसी भी प्रकार का मोबाइल समर्थन नहीं किया है, लेकिन मुझे नहीं पता कि मैं डेस्कटॉप और मोबाइल दोनों को कैसे लक्षित करूंगा।

मैंने प्रतिक्रिया-डीएनडी-टच-बैकएंड देखा है, लेकिन मुझे नहीं पता कि मैं दोनों को कैसे मिलाऊंगा।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

https://gfycat.com/ScientificEvilAmericanbadger

यह मूल रूप से सिर्फ मैं ही खेल रहा हूं। प्रतिक्रिया-डीएनडी फ़ाइल ड्रॉप ज़ोन को लागू करने के लिए इसे छोटा बनाता है।

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

codecks.io अभी भी विकास में है लेकिन जल्दी पहुंच के करीब है

आप इसे कितना उपयोगी पाते हैं?

ढेर सारा। ब्राउज़र व्यवहार को सामान्य बनाना और प्रतिक्रिया दृष्टिकोण की पेशकश करना इस पुस्तकालय को मेरे लिए कोई दिमाग नहीं बनाता है

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

दस्तावेज़ीकरण बहुत अच्छा है, लेकिन इसके साथ काम करना शुरू करते समय, मैं आश्चर्यजनक मुद्दों में भाग गया जहां यह त्रुटि संदेशों के बिना काम नहीं करता था, मैं इसे विश्वसनीय रूप से पुन: पेश नहीं कर सका लेकिन शायद शून्य-ऊंचाई ड्रैग लक्ष्यों के साथ करना पड़ा।

आप किन विशेषताओं की परवाह करते हैं?

ब्राउज़र सामान्यीकरण, स्पर्श इंटरैक्शन के लिए समर्थन

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

https://gfycat.com/CleanLegitimateAracari

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

मेरे पास कोई गंभीर समस्या नहीं है, लेकिन 0.x से 1.x में संक्रमण बहुत भ्रमित करने वाला था और एक अच्छा उदाहरण जहां डिस्ट टैग का ठीक से उपयोग नहीं किया गया था (1.0.0-rc को बिना अपडेट किए latest के रूप में जारी किया गया था दस्तावेज)। यह पुल के नीचे का सारा पानी है, वैसे भी। :)

1.0.0-आरसी अद्यतन दस्तावेज के बिना नवीनतम के रूप में जारी किया गया था

हाँ, इससे पहले कि मैंने सीखा कि डिस्ट-टैग कैसे काम करते हैं। :हर्ष:

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

क्लाइंट प्रोजेक्ट के लिए इसका उपयोग करना जिसमें बहुत अधिक ड्रैग एंड ड्रॉप इंटरैक्शन है। कुछ उल्लेखनीय घटक हैं:

• एक ट्री व्यू जहां आप नोड्स को सॉर्ट और नेस्ट कर सकते हैं
• ट्रेलो के समान एक सूची/कार्ड दृश्य, केवल छँटाई का समर्थन करता है।

यह एक सहयोग उपकरण भी है इसलिए अधिकांश इंटरफ़ेस अपडेट सॉकेट सर्वर पर भेजे जाते हैं।

आप इसे कितना उपयोगी पाते हैं?

बहुत उपयोगी, अपने घटक से ड्रैगिंग लॉजिक को अलग करना और व्यक्तिगत रूप से इसका परीक्षण करना बहुत आसान है।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

नेस्टिंग और सॉर्टिंग का समर्थन करने वाले ट्री व्यू के साथ हमें बहुत सी समस्याओं का सामना करना पड़ता है,

हमने जिन बड़े मुद्दों का अनुभव किया उनमें से एक ट्री व्यू को लागू करना था जो नेस्टिंग और सॉर्टिंग का समर्थन करता है।

हमारे पास विभिन्न प्रकार के नोड (फ़ोल्डर, सूचियाँ) हैं। एक उपयोगकर्ता या तो किसी फ़ोल्डर पर कुछ छोड़ सकता है जो इसे घोंसला बनाने या किसी अन्य नोड के नीचे या ऊपर सॉर्ट करने का कारण बनता है। यह इंटरैक्शन बहुत अधिक झिलमिलाहट, कुछ छोटे व्यवहार और कभी-कभी प्रदर्शन में कमी के साथ आता है। यह वीडियो देखें: http://s.2to1.be/fAtX ,

इसके काम करने का तरीका इस प्रकार है:

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

वर्तमान में हम कुछ गणित का उपयोग करते हैं (इस रेपो में सॉर्ट करने योग्य उदाहरण पर एक भिन्नता) गीलेर की गणना करने के लिए या एक फ़ोल्डर पर या नीचे/ऊपर नोड नहीं है। प्रारंभ में मैंने Folder घटक को DropTarget बनाने की कोशिश की लेकिन यह काम नहीं किया तो मैं अन्य Node DropTarget को सॉर्ट करने में असमर्थ था

आप किन विशेषताओं की परवाह करते हैं?

• टेस्टेबिलिटी
• बैकएंड को स्विच आउट करना
• घटनाओं में शामिल होना
• ब्राउज़र समर्थन

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

ऊपर वीडियो देखें

मैंने अभी हाल ही में रिएक्ट-डीएनडी को एक (अभी जारी किया जाना है) शिक्षा वेब ऐप में जोड़ा है। यह आश्चर्यजनक है! आपके काम के लिए बहुत बहुत धन्यवाद!

आईएमओ की सबसे बड़ी जीत यह है कि प्रतिक्रिया-डीएनडी पूरे ऐप में डीएनडी कार्यक्षमता के प्रबंधन के लिए सिर्फ सही स्तर का अमूर्तता प्रदान करता है।

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

अब तक मैंने जो एकमात्र मुद्दा चलाया है वह टच बैकएंड में था, लेकिन मैं आगे बढ़ने के लिए एक त्वरित हैक करने में सक्षम था और किसी ने टिप्पणी की कि वे अधिक सामान्य पुल अनुरोध पर काम कर रहे हैं।

पहले से ही अद्भुत एपीआई को देखते हुए मुझे जिस मुख्य विशेषता की परवाह है वह है ठोस स्पर्श समर्थन।

व्यक्तिगत रूप से बोलते हुए कि मैं ओपन सोर्स प्रोजेक्ट्स के लिए पुल अनुरोध क्यों नहीं करता (अभी तक, वैसे भी) ... मैं एक डिजाइनर हूं। हालांकि मैं इस उपकरण का उपयोग करता हूं, उदाहरण के लिए, मेरा सिर स्वाभाविक रूप से बहुत अलग प्रकार की समस्याओं के बारे में सोच रहा है। इस तरह के पुस्तकालयों में उत्पन्न होने वाले मुद्दों को हल करने में बस अच्छा नहीं होने के अलावा, यह वास्तव में उस तरह का काम नहीं है जो मैं सामान्य रूप से करता हूं और मैं अपने समाधान पर "विश्वास" नहीं करता। मुझे पता है कि यहां कुछ स्वार्थ है, लेकिन मुझे लगता है कि कुछ से अधिक डिजाइनर हैं जो इस तरह से कार्य करने वाले फ्रंट-एंड डेवलपमेंट में कोड के साथ भी होते हैं। मैं आप जैसे लोगों के लिए बहुत आभारी हूं जो मेरे जैसे डिजाइनरों को ऐसे टूल के साथ मदद करने के इच्छुक हैं जो ऐप विकास की जटिलताओं को उत्पाद डिजाइन की जटिलताओं के साथ करीब संरेखण में लाते हैं ताकि डोमेन के बीच घूमना कम परेशान हो।

एफवाईआई, मैं लेआउट परिवर्तनों को एनिमेट करने के लिए प्रतिक्रिया-फ्लिप-चाल के संयोजन में प्रतिक्रिया-डीएनडी का उपयोग कर रहा हूं। अभी कुछ ही दिन हुए हैं, लेकिन ऐसा लगता है कि दोनों की जोड़ी एक साथ बहुत अच्छी है।

@arstin

इसने पूरी तरह से मेरा दिन बना दिया। :दिल:

_आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?_
उत्पाद अभी भी लपेटे में है।

_आपको यह कितना उपयोगी लगता है?_
बहुत उपयोगी, हमारे पास बहुत सारे ड्रैग एंड ड्रॉप प्रकार हैं। डीएनडी तर्क को घटकों के भीतर रखने से हमारे दिमाग को सभी जटिलताओं का प्रबंधन करने में मदद मिली है।

_आपको इससे कितनी बार समस्या होती है, और वे कितने निराशाजनक हैं?_
हमारे द्वारा दर्ज किए गए ड्रॉप लक्ष्यों की भारी मात्रा के कारण हमारे पास प्रदर्शन के साथ कुछ समस्याएं हैं। अन्यथा यह बहुत अच्छा काम करता है!

_आप किन सुविधाओं की परवाह करते हैं?_
प्रदर्शन और एसवीजी संगतता।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?
पूरी तरह से नहीं, लेकिन इससे आपको उस समस्या का अंदाजा हो जाएगा जिसे हम रिएक्ट-डीएनडी के साथ हल करने का प्रयास कर रहे हैं।

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

एक महान पुस्तकालय के लिए बहुत बहुत धन्यवाद!

यदि आप प्रतिक्रिया का उपयोग कर रहे हैं और डीएनडी सामान करना है तो यह एक जीवन रक्षक है। महान काम!

मैं अपने परिवहन प्रबंधन सॉफ्टवेयर में रिएक्ट डीएनडी का उपयोग करता हूं। अब तक मुझे कोई समस्या नहीं थी।

उपयोगकर्ता डिलीवरी स्टॉप को घसीटता है और उन्हें सीधे परिकलित दूरी वाले मानचित्र पर देखता है।

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

ड्रैग-एंड-ड्रॉपी ब्लॉक-आधारित सीएमएस (अभी तक एक और आंतरिक बीटा, अप्रैल में क्लाइंट के लिए लॉन्चिंग)

आप इसे कितना उपयोगी पाते हैं?

बेहद। हालांकि एपीआई _exactly_ कुछ अन्य तृतीय-पक्ष घटकों के रूप में सीधे-आगे नहीं है, यह सुपर शक्तिशाली है और वास्तव में आपको जो कुछ भी चाहिए वह करने देता है।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

शायद ही कभी और बहुत निराशाजनक नहीं।

आप किन विशेषताओं की परवाह करते हैं?

स्थिरता और क्रॉस-ब्राउज़र बुलेट-प्रूफनेस।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

हम आसन वेब एप्लिकेशन में रिएक्ट डीएनडी का उपयोग उन सभी स्थानों के लिए करते हैं जहां हम ड्रैग-एंड-ड्रॉप का उपयोग करते हैं। ध्यान दें, हम वर्तमान में अपने इन-हाउस लूना फ्रेमवर्क से रिएक्ट के लिए अपने एप्लिकेशन को फिर से लिख रहे हैं, और उन सभी जगहों पर री-राइट के दौरान रिएक्ट डीएनडी का उपयोग कर रहे हैं जहां हम ड्रैग-एंड-ड्रॉप का उपयोग करते हैं।

आप इसे कितना उपयोगी पाते हैं?

हमने इसे बहुत उपयोगी पाया है। एपीआई के साथ काम करना आसान है, और हमें कुछ घटकों के भीतर ड्रैग-एंड-ड्रॉप को समाहित करके चिंताओं को स्पष्ट रूप से अलग करने की अनुमति देता है।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

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

आप किन विशेषताओं की परवाह करते हैं?

प्रदर्शन, चिंताओं को अलग करना, परीक्षण क्षमता

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

@epelz आपको शायद इसे प्रायोजित करने के लिए आसन मिलना चाहिए अन्यथा परियोजना धीमी होने वाली है

या तो https://github.com/Asana या https://github.com/FogCreek , जो ट्रेलो बनाते हैं जो प्रतिक्रिया-डीएनडी का उपयोग करता है, महान प्रायोजक हो सकते हैं।

@gaearon बेहतर अभी तक फेसबुक प्रायोजक है

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

हमारे UI की अगली पीढ़ी।

आप इसे कितना उपयोगी पाते हैं?

अत्यंत! मुझे दस्तावेज़ पसंद हैं लेकिन यह अधिक वास्तविक दुनिया के उदाहरणों का उपयोग कर सकता है।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

ड्रैगसोर्स के साथ एक घटक को सजाते समय बस एक समस्या का सामना करना पड़ा जो कि घटक बदलते समय कंपोनेंटविलअपडेट विधि को निष्पादित करने से रोक रहा है। बहुत निराशा होती है इसलिए मुझे लगता है कि मुझे एक बग फाइल करनी चाहिए। मैं अनुमान लगा रहा हूं कि यह मैं हूं और आप नहीं। ;)

आप किन विशेषताओं की परवाह करते हैं?

प्रदर्शन, स्थिरता और स्पर्श समर्थन।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

अभी नहीं, मुझे डर है लेकिन नई सूचियों से सामग्री को फिर से व्यवस्थित करने और उनमें खींचने के साथ सूचियां सोचें। यहां अन्य उदाहरणों की तुलना में काफी सरल है।

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

हम @teleport पर कार्यों को पुन: व्यवस्थित करने और वर्गीकृत करने के लिए हमारे ज़ेन (चलती चेकलिस्ट) उत्पाद में रिएक्ट डीएनडी का उपयोग करते हैं।

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

आप इसे कितना उपयोगी पाते हैं?

हालांकि मॉडल को समझने में कुछ समय लगा, लेकिन डिजाइन वास्तव में साफ है और हमने इसे हर जगह इस्तेमाल करने का फैसला किया है जहां हमें डीएनडी की आवश्यकता होगी। तो, बहुत उपयोगी।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

अब तक हमारे पास 2 मुद्दे हैं:

• टच बैकएंड (प्रदर्शन सहित) के साथ ड्रैग यूएक्स प्राप्त करना
• शुरू में मैंने जेएस में ड्रॉप एरिया लॉजिक को लागू करने की कोशिश की, लेकिन रिएक्ट डीएनडी से सही लक्ष्य-सापेक्ष निर्देशांक (यह निर्धारित करने के लिए कि लक्ष्य से ऊपर या नीचे ड्रॉप करना है) प्राप्त करने में सक्षम नहीं होने के कारण अटक गया, अंततः अलग ओवरलेइंग डोम तत्व बनाने का फैसला किया ड्रॉप लक्ष्य के रूप में।

आप किन विशेषताओं की परवाह करते हैं?

प्रदर्शन, अंतर्निहित ब्राउज़र/प्लेटफ़ॉर्म की विचित्रताओं को छिपाना।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

टेलीपोर्ट ज़ेन:

प्रतिक्रिया-डीएनडी-ट्रीव्यू:

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?
डिस्कॉर्ड - https://discordapp.com - गेमर्स के लिए वॉयस और टेक्स्ट चैट

आप इसे कितना उपयोगी पाते हैं?
बहुत!

आपको इसके साथ कितनी बार समस्या होती है, और वे कितने निराश होते हैं?
कभी-कभी, 5/10 निराशा होती है।

आप किन विशेषताओं की परवाह करते हैं?
सभी वर्तमान कार्यक्षमता।

हमने स्लैक डेस्कटॉप क्लाइंट के लिए लगभग प्रतिक्रिया-डीएनडी का उपयोग किया, लेकिन दुर्भाग्य से दो सीमाओं में भाग गया जो डीलब्रेकर बन गए:

1. ड्रैगिंग लॉजिक को कस्टमाइज़ करना संभव नहीं है (अर्थात वह लॉजिक जो ड्रैग स्टेट की गणना करता है, जैसे कि जब ड्रैग प्रगति पर हो)।
   
   
   
   • ड्रैगिंग स्टेट से इंजेक्ट किए गए बदलते प्रॉप्स के जवाब में कंपोनेंट्स को बदलना बहुत आसान है। कस्टम रिएक्ट कंपोनेंट के साथ ड्रैग प्रीव्यू को कस्टमाइज़ करना भी काफी सरल है। लेकिन दुर्भाग्य से, ड्रैग ऑपरेशन में आप जो डेटा संलग्न करते हैं, वह केवल कर्सर के साथ संलग्न और उसका अनुसरण कर सकता है। यह एक उपयोगकर्ता अनुभव को रोकता है जैसे हमारे पास वर्तमान में हमारे साइडबार के साथ है, जहां आप टीम आइकन को पुन: व्यवस्थित करने के लिए चारों ओर खींच सकते हैं, और वे ड्रैग केवल y-अक्ष तक सीमित हैं। प्रतिक्रिया-डीएनडी के साथ, आप आसानी से एक अक्ष पर ड्रैग पूर्वावलोकन को बाधित कर सकते हैं, लेकिन जब आप खींचते हैं तो कर्सर से जुड़े डेटा को बाधित करना असंभव है। इसका मतलब यह है कि यदि आप कर्सर को साइडबार से क्षैतिज रूप से दूर ले जाते हैं, लेकिन कर्सर अभी भी एक ड्रॉप लक्ष्य के ऊपर "ऊपर" है, तो प्रतिक्रिया-डीएनडी ड्रॉप लक्ष्य को बिल्कुल भी प्रतिक्रिया नहीं देगा। (वर्तमान में हमारे पास प्रतिक्रिया-डीएनडी के बिना व्यवहार के लिए नीचे जीआईएफ देखें)
     
     
   
   
2. यदि आप hover पर काम कर रहे हैं तो एक कस्टम ड्रैग लेयर का उपयोग नियमित रिएक्ट रेंडर लूप को ब्लॉक कर देता है। चूँकि आपको एक अतिरिक्त प्रतिक्रिया घटक बनाना होगा यदि आप एक कस्टम ड्रैग लेयर चाहते हैं, और वह ड्रैग लेयर dnd मॉनिटर से props परिवर्तनों के जवाब में अपनी स्थिति बदलकर काम करता है, तो render() समाप्त हो जाता है _a बहुत_ कहा जाता है। यह केवल एक मुद्दा है यदि आप अपने ड्रैगसोर्स को चारों ओर खींचते समय hover पर किसी अन्य घटक (संभवतः अन्य ड्रॉप लक्ष्य) को फिर से प्रस्तुत करने की योजना बना रहे हैं। हम स्थिति को hover पर एसिंक्रोनस रूप से बदलकर और ड्रॉप लक्ष्य नहीं बदले जाने पर होवर पर जल्दी लौटकर इसे कुछ हद तक कम करने में कामयाब रहे, लेकिन होवर करते समय ड्रॉप लक्ष्य बदलते समय अभी भी ध्यान देने योग्य अंतराल था।

उम्मीद है कि प्रतिक्रिया मददगार है! जब मैं संभवतः स्लैक ऐप में इसका उपयोग कर रहा था, तब मुझे प्रतिक्रिया-डीएनडी के साथ काम करने में मज़ा आया, और यदि संभव हो तो मुझे इन सीमाओं को पार करते हुए देखना अच्छा लगेगा।

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?

हम इसका उपयोग tylio में करते हैं, जो वेब पेज बनाने का एक नया तरीका है। रिएक्ट-डीएनडी उस पृष्ठ पर सामने और केंद्र में है जहां आप अपनी सामग्री अपलोड करते हैं।

आप इसे कितना उपयोगी पाते हैं?

बहुत उपयोगी; शुरुआत में अपने सिर को इसके चारों ओर लपेटना थोड़ा मुश्किल है, क्योंकि आपको सभी चलती भागों को एक बार में समझने की जरूरत है, लेकिन एक बार जब यह क्लिक करता है तो आप जाने के लिए अच्छे होते हैं।

आपको इससे कितनी बार समस्या होती है, और वे कितने निराश होते हैं?

हमारा मामला काफी जटिल है, क्योंकि हम अलग-अलग आकार की वस्तुओं को फिर से व्यवस्थित और स्थानांतरित कर रहे हैं, और हम नहीं चाहते कि वे इधर-उधर हो जाएं। मुझे इसके साथ कुछ समस्याएँ थीं, लेकिन मुझे लगता है कि यह पुस्तकालय की तुलना में इसका उपयोग करने के तरीके के बारे में अधिक था।

आप किन विशेषताओं की परवाह करते हैं?

उनमें से बहुत ज्यादा! हम विभिन्न प्रकार के ड्रैग सोर्स और ड्रॉप टारगेट, नेटिव फाइल्स / urls / टेक्स्ट, HTML5 और कस्टम ड्रैग लेयर के साथ टच बैकएंड का उपयोग करते हैं।

क्या आप अपने उत्पाद के कुछ स्क्रीनशॉट संलग्न कर सकते हैं?

यदि कोई इसे टाइपस्क्रिप्ट के साथ उपयोग करता है, तो क्या आप एक मूल उदाहरण प्रदान कर सकते हैं? मैं इस त्रुटि के साथ फंस गया:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

मैं इसे इस तरह से उपयोग करता हूं:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

मुझे पता नहीं है कि इसमें झंकार करने में बहुत देर हो चुकी है, लेकिन मैं कुछ (उम्मीदवार रचनात्मक) प्रतिक्रिया देना चाहता था।

मैंने पाया कि रिएक्ट-डीएनडी को समझना (और लागू करना) कुछ मुश्किल है। इसमें कई मूविंग पार्ट्स होते हैं और सेटअप काफी शामिल होता है। मैं उम्मीद कर रहा था कि कुछ ऐसा हो जो "प्लग-एन-प्ले" हो। और शायद ऐसा इसलिए है क्योंकि यह कई अलग-अलग चीजें होने की कोशिश करता है (लक्ष्यों को खींचें/छोड़ें, सूची पुन: आदेश देना, आदि)। लेकिन मैं एक अलग दृष्टिकोण ले रहा था, जो मूल रूप से प्रत्येक आइटम पर बस ऊपर/नीचे बटन डाल रहा था और इस तरह से फिर से ऑर्डर कर रहा था, आंदोलन को एनिमेट करने के लिए प्रतिक्रिया-फ्लिप-चाल के साथ संयुक्त।

मुझे इसका एक कांटा देखना अच्छा लगेगा जो पूरी तरह से सूची पुन: क्रम पर केंद्रित है, और इसे काम करने के लिए इसे _super_ सरल रखता है।

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

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

बीटीडब्ल्यू, मैं इसकी टाइपस्क्रिप्ट परिभाषा के आधार पर इसके लिए एक फ्लोटाइप परिभाषा लिखने की प्रक्रिया में हूं, क्योंकि फ्लो-टाइप पर मौजूदा एक अधूरा है।

वाह, बहुत सारे इनपुट! यह जाने के लिए बहुत सारे डेटा है! मैं इस मुद्दे को खत्म करने जा रहा हूं। टिप्पणियाँ सबमिट करने के लिए समय निकालने के लिए सभी को धन्यवाद!

मैं अगले कुछ हफ्तों में कुछ दस्तावेज़ों को अपडेट करने की योजना बना रहा हूं, और मेरा एक विचार रिएक्ट डीएनडी का उपयोग करके परियोजनाओं और अनुप्रयोगों के लिए एक शोकेस बनाना है। मैं उन परियोजनाओं पर कब्जा करने के लिए एक अनुवर्ती मुद्दा बनाऊंगा जब मैं उस परियोजना को लेने के लिए इधर-उधर हो जाऊंगा!

मैं

@mnquintana बहुत ही रोचक प्रतिक्रिया- क्या आपने और टीम ने एक और ड्रैग एंड ड्रॉप लाइब्रेरी का उपयोग किया है या सिर्फ स्क्रैच से पूरी तरह से कुछ बनाया है?

@mnquintana यह जानने के लिए वास्तव में बहुत बढ़िया होगा कि आपने इसे दूर करने के लिए क्या किया, या बेहतर अभी तक, अपनी डीएनडी लाइब्रेरी को ढीला कर दिया है!

@epelz आपकी मदद की ज़रूरत है। क्या आपने डैशबोर्ड में कार्ड और सूची में आइटम खींचने के लिए या कार्ड और सूची के लिए अलग घटक का उपयोग करने के लिए पुन: प्रयोज्य ड्रैग एंड ड्रॉप घटक बनाया है। अगर आप जवाब दे सकते हैं तो मैं वास्तव में सराहना करता हूं।

मुझे पता है कि यह एक बहुत पुराना चर्चा सूत्र है, लेकिन मैं वैसे भी योगदान देना चाहता था। Evernote
व्यापार के लिए हमारे नए स्पेस उत्पाद के लिए अभी प्रतिक्रिया-डीएनडी का उपयोग करता है! हमने बहुत कुछ सीखा है और यदि लोग रुचि रखते हैं तो हमने जो सीखा है उसे साझा करने का प्रयास कर सकते हैं :)

आप रिएक्ट डीएनडी का उपयोग किन उत्पादों में कर रहे हैं?
https://evernote.com/business

आप इसे कितना उपयोगी पाते हैं?
बहुत उपयोगी! यह एक कठिन सीखने की अवस्था थी लेकिन हमें वह करने के लिए मिला जो हम करना चाहते हैं।

आपको इसके साथ कितनी बार समस्या होती है, और वे कितने निराश होते हैं?
मुझे लगता है कि पहली शुरुआत के लिए कुछ बड़ी बाधाएं हैं और कुछ चीजों को संभालना दिलचस्प है। होवर और ड्रॉप प्रभावों के बारे में कुछ बग ने हमें बहुत भ्रमित कर दिया लेकिन इसमें और अधिक देखने पर, ऐसा लगता है कि उनमें से कुछ HTML5 के ड्रैग/ड्रॉप मूल कार्यान्वयन के साथ सीमाएं हैं (ड्रॉप प्रभाव विशेष रूप से उस कर्सर को ओवरराइड करते हैं जिसे आप लागू करना चाहते हैं ताकि हम कर सकें' cursor: no-drop जैसी चीजों का लाभ न उठाएं। यह वास्तव में स्मार्ट है कि आपने इसे बनाया है ताकि यदि आवश्यक हो तो आप अपने स्वयं के बैकएंड को लागू कर सकें और हमने अभी तक टच बैकएंड के साथ प्रयोग करने का जोखिम नहीं उठाया है।

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

आप किन विशेषताओं की परवाह करते हैं?
हम कई ड्रैग-एंड-ड्रॉप को लागू करना चाह रहे हैं और ऐसा नहीं लगता कि रिएक्ट-डीएनडी के साथ इसे करने का एक साफ तरीका है जो हम जानते हैं? हालांकि हम इस पर और गौर कर रहे हैं। जब हम गहरा गोता लगाते हैं तो हम और अधिक साझा करेंगे।

@augbog सुनिश्चित नहीं है कि आपने इसे आज़माया है, लेकिन क्या आपने #14 अंक में पहली पोस्ट में गेरॉन के कार्यान्वयन पर ध्यान दिया है और एक कस्टम ड्रैग लेयर का उपयोग किया है?

एक तरह से, यह परिदृश्य पहले से ही संभव है: उपभोक्ता मैन्युअल रूप से चयनित तत्वों का ट्रैक रख सकते हैं, ड्रैगप्रेव्यू को किसी प्रकार की सामान्य प्लेसहोल्डर छवि पर सेट कर सकते हैं और कई तत्वों (जहां तक ​​​​व्यावसायिक तर्क का संबंध है) को छोड़ने के लिए उचित प्रतिक्रिया दे सकते हैं।

https://react-dnd.github.io/react-dnd/examples-drag-about-custom-drag-layer.html

धन्यवाद @ जेएम-मेंडेज़ हाँ, हमने देखा और हम अनुवर्ती टिप्पणी के बारे में चिंतित थे कि कई घटकों को पता है कि उन्हें खींचा जा रहा है लेकिन इसे फिर से पढ़ने के बाद, यह वास्तव में हमें प्रभावित नहीं कर सकता है इसलिए हम अभी भी इसे देख रहे हैं :) धन्यवाद उस पर कॉल आउट के लिए!

क्रॉस आईफ्रेम डीएनडी या पैरेंट विंडो के लिए चाइल्ड आईफ्रेम ड्रैगगेबिलिटी के लिए अभी भी कोई बैकएंड नहीं है। @gaearon मैंने इस मुद्दे के बारे में कुछ धागे पर आपकी टिप्पणी देखी, मैं यह कहना चाहता हूं कि यही एकमात्र कारण है कि मुझे अपनी परियोजना के लिए शुद्ध जेएस समाधान का उपयोग करना पड़ा।

(संपादित करें) मुझे लगता है कि ड्रैग एंड ड्रॉप पेज बिल्डर बनाने की कोशिश करने वाले किसी भी व्यक्ति के लिए यह वास्तव में उपयोगी सुविधा है।