पुनःक्रमण योग्य सूचियों के लिए SortableContext

SortableContext एक विशिष्ट डीएनडी-किट घटक है, जो पुनर्क्रमित की जा सकने वाली सूची को लपेटता है। जहाँ useDraggable और useDroppable मनमाने ड्रैग-एंड-ड्रॉप को संभालते हैं, वहीं SortableContext विशेष रूप से उस स्थिति को संभालता है जिसमें सूची के तत्वों को खींचकर नई स्थिति में ले जाकर उनका क्रम बदलना हो।

SortableContext में items प्रॉप आवश्यक होता है। इसमें विशिष्ट स्ट्रिंग या संख्या वाली ID की एक सरणी होती है, जो अंतर्गत क्रमबद्ध किए जा सकने वाले घटकों में इस्तेमाल की गई ID से मेल खाती है। इस सरणी का क्रम तत्वों का वर्तमान क्रम निर्धारित करता है। जब आप इस सरणी को स्थिति में अपडेट करते हैं, तो सूची नए क्रम में फिर से रेंडर होती है।

SortableContext एक strategy प्रॉप स्वीकार करता है, जो यह नियंत्रित करता है कि तत्वों का क्रम कैसे बदला जाए। verticalListSortingStrategy ऊर्ध्वाधर सूचियों के लिए है और ऊर्ध्वाधर स्थिति के आधार पर प्रविष्टि बिंदु की गणना करता है। horizontalListSortingStrategy क्षैतिज सूचियों के लिए है। rectSortingStrategy ग्रिड के लिए है। अपने विन्यास से मेल खाने वाली रणनीति चुनें।

SortableContext के अंदर, प्रत्येक सूची तत्व useDraggable के बजाय useSortable({ id }) हुक का उपयोग करता है। useSortable, useDraggable का विस्तारित रूप है। यह वही विशेषताएँ, श्रोता, setNodeRef और रूपांतरण लौटाता है, साथ ही क्रम बदलने के लिए उपयोगी अतिरिक्त मान, जैसे isDragging और overIndex, भी देता है।

useSortable से मिलने वाला isDragging मान तब true होता है, जब तत्व सक्रिय रूप से खींचा जा रहा हो। आम तौर पर आप इसका उपयोग सूची में मूल तत्व की अपारदर्शिता कम करने या उस पर स्थानधारक शैली लगाने के लिए करते हैं। यह दृश्य रिक्ति उपयोगकर्ता को दिखाती है कि तत्व इस समय सूची में कहाँ स्थित है।

डीएनडी-किट @dnd-kit/sortable से arrayMove(array, fromIndex, toIndex) उपयोगिता निर्यात करता है। यह एक नई सरणी लौटाता है, जिसमें fromIndex पर मौजूद तत्व को toIndex पर ले जाया जाता है। क्रम बदलने वाला ड्रैग पूरा होने पर स्थिति की सरणी अपडेट करने का यही मानक तरीका है।

क्रमबद्ध सूची के लिए DndContext के onDragEnd कॉलबैक में, आप items.indexOf(event.active.id) और items.indexOf(event.over?.id) का उपयोग करके पुराने और नए इंडेक्स खोजते हैं। यदि दोनों इंडेक्स वैध और अलग-अलग हों, तो सरणी का क्रम बदलने के लिए setItems(arrayMove(items, oldIndex, newIndex)) कॉल करें।

जब किसी तत्व को खींचा जाता है, तो सूची के अन्य तत्व नई स्थितियों पर ऐनिमेट होते हैं, ताकि दिखे कि खींचा गया तत्व कहाँ जाकर रुकेगा। useSortable प्रत्येक ऐसे तत्व के लिए CSS रूपांतरण उपलब्ध कराता है जिसे नहीं खींचा जा रहा है, जिससे वह रास्ते से हट जाता है। इस रूपांतरण में CSS संक्रमण जोड़ने से गति का ऐनिमेशन सहज हो जाता है।

क्रमबद्ध किए जा सकने वाले तत्वों के रूपांतरण गुण पर CSS संक्रमण लागू करें: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined। जब किसी तत्व को खींचा जा रहा हो, तब संक्रमण की आवश्यकता नहीं होती, क्योंकि उसे सीधे कर्सर का अनुसरण करना चाहिए। स्थान बदलने पर संक्रमण सहज रूप से सरकने का ऐनिमेशन बनाता है।

सर्वोत्तम उपयोगकर्ता अनुभव के लिए SortableContext को DragOverlay के साथ संयोजित करें। सूची में खींचा जा रहा तत्व अर्धपारदर्शी स्थानधारक बन जाता है, जिसके लिए isDragging का उपयोग किया जाता है, जबकि DragOverlay कर्सर का अनुसरण करने वाली ठोस, उभरी हुई प्रतिकृति रेंडर करता है। यह तरीका उन दृश्य गड़बड़ियों से बचाता है, जिनमें खींचा जा रहा तत्व विभिन्न स्थितियों के बीच उछलता हुआ दिखाई देता है।

SortableContext ऊर्ध्वाधर सूचियों, जैसे कार्य बोर्ड और कार्य-सूचियों, तथा क्षैतिज सूचियों, जैसे टैब पट्टियों और छवि कैरोसेल, दोनों के लिए समान रूप से अच्छी तरह काम करता है। strategy प्रॉप बदलकर रणनीतियों के बीच स्विच करें। आप इसका उपयोग ग्रिड विन्यास के लिए भी कर सकते हैं, जिसमें rectSortingStrategy ड्रैग की स्थिति के आधार पर निकटतम ग्रिड सेल की गणना करता है।

SortableContext पुनर्क्रमित की जा सकने वाली सूची को लपेटता है और इसके लिए विशिष्ट ID वाली तत्वों की सरणी तथा एक रणनीति आवश्यक होती है—ऊर्ध्वाधर, क्षैतिज या ग्रिड। प्रत्येक तत्व useDraggable के बजाय useSortable का उपयोग करता है और isDragging तथा overIndex प्राप्त करता है। onDragEnd में arrayMove को तत्वों की सरणी, oldIndex और newIndex देने पर सरणी का क्रम बदल जाता है। रूपांतरण पर CSS संक्रमण स्थान बदले गए तत्वों को सहज रूप से ऐनिमेट करता है।