रिएक्ट में ड्रैग एंड ड्रॉप कंपोनेंट्स कैसे बनाएं

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।

क्या आप कभी भी अपने रिएक्ट घटकों में ड्रैग-एंड-ड्रॉप कार्यक्षमता जोड़ना चाहते हैं? यह उतना मुश्किल नहीं है जितना आप सोच सकते हैं।

ड्रैग एंड ड्रॉप माउस या टचपैड का उपयोग करके स्क्रीन पर तत्वों को स्थानांतरित करने या हेरफेर करने का एक तरीका है। यह वस्तुओं की सूची को फिर से व्यवस्थित करने या वस्तुओं को एक सूची से दूसरी सूची में ले जाने के लिए एकदम सही है।

आप रिएक्ट में ड्रैग-एंड-ड्रॉप घटकों का निर्माण दो विधियों में से किसी एक का उपयोग करके कर सकते हैं: अंतर्निहित सुविधाएँ या एक तृतीय-पक्ष मॉड्यूल।

रिएक्ट में ड्रैग एंड ड्रॉप को लागू करने के विभिन्न तरीके

रिएक्ट में ड्रैग एंड ड्रॉप को लागू करने के दो तरीके हैं: रिएक्ट की अंतर्निहित सुविधाओं का उपयोग करना, या तीसरे पक्ष के मॉड्यूल का उपयोग करना। से शुरू एक रिएक्ट एप्लिकेशन बनाना, फिर अपना पसंदीदा तरीका चुनें।

विधि 1: अंतर्निहित सुविधाओं का उपयोग करना

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

किसी तत्व को खींचने योग्य बनाने के लिए, आप खींचने योग्य विशेषता को सत्य पर सेट कर सकते हैं। उदाहरण के लिए:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
कक्षाMyComponentका विस्तारअवयव{
 प्रदान करना() {
वापस करना (
<डिव
 खींचने योग्य
 onDragStart={यह.हैंडलड्रैगस्टार्ट}
 ऑनड्रैग = {यह.हैंडलड्रैग}
 ऑनड्रैगएंड={यह.हैंडलड्रैगएंड}
>
 मुझे खिचो!
</div>
 );
 }
}
निर्यातगलती करना MyComponent;

किसी तत्व को ड्रॉप करने योग्य बनाने के लिए, आप हैंडलड्रैगस्टार्ट, हैंडलड्रैग, और हैंडलड्रैगएंड विधियों को बना सकते हैं। ये विधियाँ तब चलेंगी जब कोई उपयोगकर्ता तत्व को खींचेगा और जब वे इसे छोड़ देंगे। उदाहरण के लिए:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
कक्षाMyComponentका विस्तारअवयव{
 हैंडल ड्रैगस्टार्ट (ईवेंट) {
// यह विधि तब चलती है जब ड्रैगिंग शुरू होती है
 कंसोल लॉग ("शुरू किया गया")
 }
हैंडलड्रैग (ईवेंट) {
// यह विधि तब चलती है जब घटक को खींचा जा रहा हो
 कंसोल लॉग ("खींच रहा है...")
 }
हैंडलड्रैगएंड (ईवेंट) {
// यह विधि तब चलती है जब ड्रैगिंग बंद हो जाती है
 कंसोल लॉग ("समाप्त")
 }
प्रदान करना() {
वापस करना (
<डिव
 खींचने योग्य
 onDragStart={यह.हैंडलड्रैगस्टार्ट}
 ऑनड्रैग = {यह.हैंडलड्रैग}
 ऑनड्रैगएंड={यह.हैंडलड्रैगएंड}
>
 मुझे खिचो!
</div>
 );
 }
}
निर्यातगलती करना MyComponent;

उपरोक्त कोड में, किसी तत्व को खींचने के लिए तीन विधियाँ हैं: हैंडलड्रैगस्टार्ट, हैंडलड्रैग और हैंडलड्रैगएंड। Div में एक खींचने योग्य विशेषता है और onDragStart, onDrag, और onDragEnd गुणों को उनके संबंधित कार्यों में सेट करता है।

जब आप तत्व को खींचते हैं, तो हैंडलड्रैगस्टार्ट विधि पहले चलेगी। यह वह जगह है जहां आप कोई भी सेटअप कर सकते हैं जो आपको करने की आवश्यकता है, जैसे डेटा को स्थानांतरित करने के लिए सेट करना।

फिर, जब आप तत्व को खींचते हैं तो हैंडलड्रैग विधि बार-बार चलती है। यह वह जगह है जहां आप तत्व की स्थिति को समायोजित करने जैसे कोई भी अपडेट कर सकते हैं।

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

आप स्क्रीन के चारों ओर घटक को onDragEnd() में भी स्थानांतरित कर सकते हैं। ऐसा करने के लिए, आपको घटक की शैली संपत्ति सेट करने की आवश्यकता होगी। उदाहरण के लिए:

आयात प्रतिक्रिया, {घटक, useState} से 'प्रतिक्रिया';
समारोहMyComponent() {
कॉन्स्ट [एक्स, सेटएक्स] = यूज़स्टेट (0);
कॉन्स्ट [वाई, सेट वाई] = यूज़स्टेट (0);
कॉन्स्ट हैंडलड्रैगएंड = (ईवेंट) => {
x(आयोजन.clientX);
सेटवाई(आयोजन.clientY);
 };
वापस करना (
<डिव
 खींचने योग्य
 onDragEnd={handleDragEnd}
 शैली = {{
 पद: "शुद्ध",
 बायां: एक्स,
 शीर्ष: वाई
 }}
>
 मुझे खिचो!
</div>
 );
}
निर्यातगलती करना MyComponent;

कोड घटक की x और y स्थिति को ट्रैक करने के लिए useState हुक को कॉल करता है। फिर, हैंडलड्रैगएंड विधि में, यह x और y स्थिति को अद्यतन करता है। अंत में, आप घटक की शैली गुण को नई x और y स्थिति में रखने के लिए सेट कर सकते हैं।

विधि 2: तृतीय-पक्ष मॉड्यूल का उपयोग करना

यदि आप रिएक्ट की अंतर्निहित सुविधाओं का उपयोग नहीं करना चाहते हैं, तो आप एक तृतीय-पक्ष मॉड्यूल का उपयोग कर सकते हैं जैसे प्रतिक्रिया-ड्रैग-एंड-ड्रॉप. यह मॉड्यूल HTML5 ड्रैग-एंड-ड्रॉप एपीआई के आसपास प्रतिक्रिया-विशिष्ट आवरण प्रदान करता है।

इस मॉड्यूल का उपयोग करने के लिए, आपको पहले इसे एनपीएम का उपयोग करके इंस्टॉल करना होगा:

NPM स्थापित करना प्रतिक्रिया-खींचें-और-बूँद--बचाना

फिर, आप इसे अपने रिएक्ट घटकों में उपयोग कर सकते हैं:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
आयात {खींचने योग्य, छोड़ने योग्य} से 'प्रतिक्रिया-ड्रैग-एंड-ड्रॉप';
कक्षाMyComponentका विस्तारअवयव{
 प्रदान करना() {
वापस करना (
<डिव>
<खींचने योग्य प्रकार ="फू" डेटा ="छड़">
<डिव>मुझे खिचो!</div>
</Draggable>
<ड्रॉप करने योग्य प्रकार = {['फू']} onDrop={this.handleDrop}>
<डिव>यहां छोड़ें!</div>
</Droppable>
</div>
 );
 }
हैंडलड्रॉप (डेटा, घटना) {
// यह विधि तब चलती है जब डेटा गिरता है
सांत्वना देनालॉग (डेटा); // 'छड़'
 }
}
निर्यातगलती करना MyComponent;

प्रतिक्रिया-ड्रैग-एंड-ड्रॉप मॉड्यूल से ड्रैग करने योग्य और ड्रॉप करने योग्य घटकों को आयात करके प्रारंभ करें। फिर, खींचने योग्य तत्व और ड्रॉप करने योग्य तत्व बनाने के लिए इन घटकों का उपयोग करें।

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

ड्रॉप करने योग्य घटक उस प्रकार के डेटा को निर्दिष्ट करने के लिए टाइप प्रोप का उपयोग करता है जिसे आप उस पर छोड़ सकते हैं। इसमें एक ऑनड्रॉप प्रोप भी है, जो कॉलबैक फ़ंक्शन को निर्दिष्ट करता है जो उस पर एक घटक छोड़ने पर चलेगा।

जब आप ड्रैग करने योग्य घटक को ड्रॉप करने योग्य पर छोड़ते हैं, तो हैंडलड्रॉप विधि चलेगी। यह वह जगह है जहाँ आप कोई भी प्रोसेसिंग कर सकते हैं जो आपको डेटा के साथ करने की आवश्यकता है।

उपयोगकर्ता के अनुकूल डीएनडी घटकों के निर्माण के लिए सुझाव

कुछ चीजें हैं जो आप अपने ड्रैग-एंड-ड्रॉप घटकों को अधिक उपयोगकर्ता-अनुकूल बनाने के लिए कर सकते हैं।

सबसे पहले, जब किसी तत्व को खींचा जा रहा हो तो आपको विज़ुअल फ़ीडबैक प्रदान करना चाहिए। उदाहरण के लिए, आप तत्व की अस्पष्टता को बदल सकते हैं या सीमा जोड़ सकते हैं। दृश्य प्रभाव जोड़ने के लिए आप सामान्य CSS या का उपयोग कर सकते हैं आपके रिएक्ट एप्लिकेशन में टेलविंड सीएसएस.

दूसरा, आपको यह सुनिश्चित करना चाहिए कि आपके उपयोगकर्ता तत्व को केवल वैध ड्रॉप लक्ष्य तक ही खींच सकते हैं। उदाहरण के लिए, आप जोड़ सकते हैं प्रकार तत्व के लिए विशेषता, जो उस प्रकार के घटक को निर्दिष्ट करता है जिसे वह स्वीकार करेगा।

तीसरा, आपको उपयोगकर्ता को ड्रैग-एंड-ड्रॉप ऑपरेशन रद्द करने का एक तरीका प्रदान करना चाहिए। उदाहरण के लिए, आप एक बटन जोड़ सकते हैं जो उपयोगकर्ता को ऑपरेशन रद्द करने की अनुमति देता है।

ड्रैग एंड ड्रॉप के साथ उपयोगकर्ता अनुभव में सुधार करें

ड्रैग-एंड-ड्रॉप सुविधा न केवल उपयोगकर्ता अनुभव को बेहतर बनाने में मदद करती है बल्कि आपके वेब एप्लिकेशन के समग्र प्रदर्शन में भी मदद कर सकती है। एक उपयोगकर्ता अब पृष्ठ को रीफ्रेश किए बिना या कई चरणों से गुजरे बिना कुछ डेटा के क्रम को आसानी से पुनर्व्यवस्थित कर सकता है।

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