SortableContext للقوائم القابلة لإعادة الترتيب

يُعد SortableContext مكوّنًا متخصصًا من dnd-kit يغلّف قائمة قابلة لإعادة الترتيب. وبينما يتولى useDraggable وuseDroppable التعامل مع السحب والإفلات العام، يتعامل SortableContext تحديدًا مع حالة الحاجة إلى إعادة ترتيب عناصر القائمة بسحبها إلى موضع جديد.

يتطلب SortableContext خاصية items: وهي مصفوفة من معرّفات فريدة نصية أو رقمية تطابق المعرّفات المستخدمة في المكوّنات القابلة للترتيب التابعة. يحدد ترتيب هذه المصفوفة الترتيب الحالي للعناصر. عند تحديث هذه المصفوفة في الحالة، تُعاد كتابة القائمة بالترتيب الجديد.

يقبل SortableContext خاصية strategy التي تتحكم في طريقة ترتيب العناصر. تُستخدم verticalListSortingStrategy للقوائم الرأسية وتحسب موضع الإدراج استنادًا إلى الموضع الرأسي. وتُستخدم horizontalListSortingStrategy للقوائم الأفقية. أما rectSortingStrategy فتُستخدم للشبكات. اختر الاستراتيجية التي تتوافق مع تخطيطك.

داخل SortableContext، يستخدم كل عنصر في القائمة خطاف useSortable({ id }) بدلًا من useDraggable. ويُعد useSortable امتدادًا شاملًا لـ useDraggable؛ إذ يعيد السمات والمستمعات وsetNodeRef وtransform نفسها، بالإضافة إلى قيم أخرى خاصة بالترتيب مثل isDragging وoverIndex.

تكون قيمة isDragging من useSortable مساوية لـ true أثناء سحب العنصر فعليًا. وعادةً ما تستخدمها لتقليل الشفافية أو لإضافة نمط عنصر نائب إلى العنصر الأصلي في القائمة أثناء سحبه. وتوضح هذه الفجوة المرئية للمستخدم موضع العنصر الحالي في القائمة.

يصدّر dnd-kit أداة مساعدة باسم arrayMove(array, fromIndex, toIndex) من @dnd-kit/sortable. وتعيد مصفوفة جديدة نُقل فيها العنصر الموجود في fromIndex إلى toIndex. وهذه هي الطريقة القياسية لتحديث مصفوفة الحالة عند اكتمال السحب لإعادة الترتيب.

في رد نداء onDragEnd داخل DndContext لقائمة قابلة لإعادة الترتيب، اعثر على الفهرسين القديم والجديد باستخدام items.indexOf(event.active.id) وitems.indexOf(event.over?.id). إذا كان كلا الفهرسين صالحًا ومختلفًا، فاستدعِ setItems(arrayMove(items, oldIndex, newIndex)) لإعادة ترتيب المصفوفة.

عند سحب عنصر، تتحرك العناصر الأخرى في القائمة إلى مواضع جديدة لتوضيح المكان الذي سيستقر فيه العنصر المسحوب. يوفر useSortable تحويل CSS لكل عنصر غير مسحوب، فيزيحه جانبًا لإفساح المجال. وتؤدي إضافة انتقال CSS إلى هذا التحويل إلى إنشاء حركة سلسة.

طبّق انتقال CSS على خاصية transform لعناصر القائمة القابلة للترتيب: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. أثناء سحب العنصر، لا حاجة إلى انتقال، إذ ينبغي أن يتتبع المؤشر مباشرةً. وعند إزاحته، ينشئ الانتقال حركة انزلاق سلسة.

للحصول على أفضل تجربة استخدام، ادمج SortableContext مع DragOverlay. يصبح العنصر المسحوب في القائمة عنصرًا نائبًا شبه شفاف باستخدام isDragging، بينما يعرض DragOverlay نسخة صلبة ومرتفعة تتبع المؤشر. ويتجنب هذا الأسلوب الاضطرابات المرئية التي قد يقفز فيها العنصر المسحوب بين المواضع.

يعمل SortableContext بالكفاءة نفسها مع القوائم الرأسية، مثل لوحات المهام وقوائم المهام، والقوائم الأفقية، مثل أشرطة التبويبات ودوارات الصور. بدّل بين الاستراتيجيات بتغيير الخاصية strategy. ويمكنك استخدامه أيضًا مع تخطيط شبكي باستخدام rectSortingStrategy، التي تحسب أقرب خلية في الشبكة استنادًا إلى موضع السحب.

ما الوسيطات التي تأخذها arrayMove عند استدعائها داخل onDragEnd لإعادة ترتيب قائمة قابلة للترتيب؟

يغلّف SortableContext قائمة قابلة لإعادة الترتيب، ويتطلب مصفوفة items تحتوي على معرّفات فريدة واستراتيجية، رأسية أو أفقية أو شبكية. يستخدم كل عنصر useSortable بدلًا من useDraggable، ويحصل بذلك على isDragging وoverIndex. وفي onDragEnd، تعيد arrayMove(items, oldIndex, newIndex) ترتيب المصفوفة. وتحرّك انتقالات CSS على transform العناصر المزاحة بسلاسة.