بنية dnd-kit والتصميم الذي يقدّم إتاحة الوصول أولًا

كانت react-beautiful-dnd مكتبة السحب والإفلات المفضّلة لـ React، لكنها أُرشفت رسميًا في عام 2023 ولم تعد قيد الصيانة. وسرعان ما التفّ المجتمع حول dnd-kit بوصفها البديل الموصى به، إذ صُمّمت من الصفر مع مراعاة React الحديثة وإمكانية الوصول.

تتمحور dnd-kit حول ثلاثة مفاهيم معمارية أساسية: يتولى DndContext إدارة حالة السحب والتنسيق بين العناصر القابلة للسحب والعناصر القابلة للإفلات، وتجرّد sensors طرق الإدخال بحيث تعمل منطقية السحب نفسها مع الفأرة واللمس ولوحة المفاتيح، بينما تتيح modifiers محاذاة حركة السحب أو تقييدها أو تحويلها.

تأتي dnd-kit مع ثلاثة مستشعرات مضمّنة. يتعامل PointerSensor مع إدخالي الفأرة واللمس عبر واجهة Pointer Events API الموحّدة. يتيح KeyboardSensor السحب والإفلات باستخدام لوحة المفاتيح فقط بالكامل. ويتعامل TouchSensor مع أحداث اللمس القديمة. تضبط المستشعرات عبر الخاصية sensors في DndContext.

توفّر dnd-kit تنقّلًا مضمّنًا باستخدام لوحة المفاتيح لدعم إمكانية الوصول. يضغط المستخدمون على Space لالتقاط عنصر، وعلى Arrow keys لنقله إلى موضع جديد، ثم على Space again لإفلاته، وعلى Escape لإلغاء السحب من دون إجراء تغييرات. يُعلَن عن هذه التفاعلات تلقائيًا لقارئات الشاشة.

تطبّق dnd-kit تلقائيًا aria-grabbed على العناصر القابلة للسحب للإشارة إلى حالة التقاطها للتقنيات المساعدة. وتستخدم aria-dropeffect على المناطق القابلة للإفلات لتوضيح ما سيحدث عند إفلات عنصر فيها. تعلن منطقة مباشرة عن تحديثات الحالة، بحيث يسمع مستخدمو قارئات الشاشة تأكيدات مثل "تم التقاط العنصر" أو "تم إفلات العنصر بنجاح".

صُمّمت dnd-kit لتدعم tree-shaking، أي أنك تستورد الأجزاء التي تستخدمها فعليًا فقط. لا تتضمن المكتبة CSS مضمّنًا، إذ تقع مسؤولية جميع التنسيقات المرئية عليك، ما يمنحك تحكمًا كاملًا في مظهر العناصر القابلة للسحب والطبقات المتراكبة ومناطق الإفلات. ويحافظ ذلك على الحد الأدنى لحجم الحزمة.

يوفّر DndContext ثلاث عمليات ردّ أساسية للأحداث لتتبّع دورة حياة السحب. تُستدعى onDragStart عندما يبدأ المستخدم بالسحب، وتتلقى معرّف العنصر النشط. تُستدعى onDragOver باستمرار أثناء تحرّك العنصر المسحوب فوق الأهداف القابلة للإفلات. وتُستدعى onDragEnd عند اكتمال السحب، فتمنحك العنصر النشط وهدف الإفلات.

تمرّر مصفوفة من إعدادات المستشعرات إلى DndContext باستخدام الخاصية sensors بالاقتران مع الخطاف useSensors. ويُهيَّأ كل مستشعر باستخدام useSensor(SensorClass, options). على سبيل المثال، يمكنك ضبط PointerSensor باستخدام حد أدنى لمسافة السحب لمنع عمليات السحب غير المقصودة عند النقر.

تحوّل المعدِّلات إحداثيات السحب قبل تطبيقها على العنصر المسحوب. يقفل restrictToVerticalAxis الحركة في اتجاه واحد. ويحافظ restrictToParentElement على بقاء العنصر المسحوب داخل الحاوية الخاصة به. ويجعل snapCenterToCursor مركز العنصر يتتبع مؤشر الفأرة. يمكنك تركيب عدة معدِّلات في مصفوفة.

يحتاج كل عنصر قابل للسحب أو للإفلات إلى معرّف فريد من نوع سلسلة نصية أو رقم. وتُعدّ هذه المعرّفات الطريقة الأساسية التي تتتبع بها dnd-kit ما يجري سحبه والمكان الذي سيُفلت فيه. داخل onDragEnd، تقرأ event.active.id للعنصر المسحوب وevent.over?.id لهدف الإفلات لتحديث حالة تطبيقك.

على خلاف العديد من مكتبات DnD التي تتعامل مع دعم لوحة المفاتيح كأمر ثانوي، تضع dnd-kit إمكانية الوصول في صميم تصميمها. يُعدّ KeyboardSensor مكوّنًا أساسيًا من الدرجة الأولى، ويتمتع بالإمكانات نفسها التي يتمتع بها PointerSensor. تُدار جميع سمات ARIA تلقائيًا، ويمكن ضبط الإعلانات المخصّصة عبر الخاصية accessibility في DndContext.

استبدلت dnd-kit مكتبة react-beautiful-dnd المؤرشفة بوصفها المعيار المجتمعي للسحب والإفلات في React. وتتمحور بنيتها حول DndContext لإدارة الحالة، والمستشعرات لتجريد الإدخال (Pointer وKeyboard وTouch)، والمعدِّلات لفرض قيود الحركة. وإمكانية الوصول جزء أساسي منها: فسمات ARIA وإعلانات المنطقة المباشرة والتنقّل الكامل باستخدام لوحة المفاتيح مضمّنة.