DndContext وuseDraggable وuseDroppable

يجب إحاطة كل ميزة للسحب والإفلات في dnd-kit بمكوّن DndContext. يُعدّ DndContext مركز التنسيق؛ فهو يتتبع عمليات السحب النشطة، ويتواصل بين العناصر القابلة للسحب والعناصر القابلة للإفلات، ويستدعي عمليات ردّ الأحداث. عادةً ما تضعه في مستوى المكوّن الذي يدير حالة السحب.

يجعل الخطاف useDraggable({ id }) أحد المكوّنات قابلًا للسحب. ويعيد أربع قيم أساسية: attributes (سمات ARIA التي تنشرها على العنصر)، وlisteners (معالجات الأحداث لبدء السحب)، وsetNodeRef (يربط مرجع العنصر القابل للسحب)، وtransform (الإزاحة الحالية بالصيغة {x, y, scaleX, scaleY}).

لتهيئة عنصر قابل للسحب، انشر attributes وlisteners على العنصر، ومرّر setNodeRef باعتباره الخاصية ref. تتضمن السمات role="button" وtabIndex وسمات aria. وتربط المستمعات معالجات أحداث الفأرة ولوحة المفاتيح التي تحتاج إليها dnd-kit لاكتشاف بدء السحب.

تكون قيمة transform من useDraggable مساويةً لـ null عند عدم السحب، وكائن إحداثيات عند السحب. تحوّلها إلى سلسلة CSS باستخدام CSS.Translate.toString(transform) من الحزمة @dnd-kit/utilities. طبّقها باعتبارها خاصية CSS المسماة transform على العنصر القابل للسحب، لكي يتبع المؤشر بصريًا.

يحدّد الخطاف useDroppable({ id }) حاويةً بوصفها هدفًا صالحًا للإفلات. ويعيد isOver (قيمة منطقية تكون true أثناء مرور عنصر قابل للسحب فوق هذا الهدف القابل للإفلات) وsetNodeRef لإرفاق المرجع بالعنصر القابل للإفلات. وعلى خلاف useDraggable، لا توجد مستمعات أحداث يجب نشرها.

تتيح لك قيمة isOver من useDroppable تقديم تغذية راجعة مرئية أثناء السحب. عندما تكون isOver بقيمة true، يمكنك تطبيق لون تمييز أو حد أو تغيير في الخلفية على منطقة الإفلات. ويساعد ذلك المستخدمين على فهم المكان الذي يمكنهم إفلات العنصر فيه، وهو أمر بالغ الأهمية لقابلية الاستخدام وإمكانية الوصول.

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

في onDragEnd، بعد التحقق من أن event.over ليس null، تحدّث الحالة لتعكس عملية النقل. على سبيل المثال، إذا كنت تنقل بطاقة بين أعمدة لوحة Kanban، فأزل البطاقة من العمود المصدر وأضفها إلى العمود الهدف الذي يحدده event.over.id.

يعرض DragOverlay معاينة عائمة للعنصر المسحوب تتبع المؤشر. ويُعرض بوصفه بوابة (خارج شجرة DOM العادية)، لذلك لا تُقصّه حاويات overflow:hidden مطلقًا. وبخلاف العنصر الأصلي، يمكن أن تتضمن المعاينة ظلال إسقاط وتحويلات تحجيم أو تدويرًا للإشارة إلى أنه قيد السحب.

لعرض المحتوى الصحيح في DragOverlay، تتبّع العنصر الذي يجري سحبه حاليًا باستخدام رد النداء onDragStart. خزّن المعرّف النشط في الحالة: setActiveDragId(event.active.id). في onDragEnd، أعد تعيينه إلى null. داخل DragOverlay، استخدم activeDragId للعثور على العنصر الصحيح وعرضه.

تجمع واجهة السحب والإفلات الحقيقية بين DndContext، وعناصر useDraggable متعددة، ومناطق useDroppable متعددة، وإدارة الحالة لتتبّع موضع كل عنصر. والفكرة الأساسية هي أن dnd-kit يوفر الآليات اللازمة، بينما تقع على عاتقك مهمة تحديث الحالة في onDragEnd وإعادة عرض الواجهة لتعكس الترتيب الجديد.

ما الأداة المساعدة التي تحوّل كائن transform من useDraggable إلى سلسلة تحويل في CSS؟

يُعد DndContext مركز التنسيق لجميع عمليات السحب في dnd-kit. يوفر useDraggable السمات والمستمعات وsetNodeRef وtransform للعناصر القابلة للسحب. ويوفر useDroppable القيمتين isOver وsetNodeRef لأهداف الإفلات. يمنحك onDragEnd القيمتين event.active.id وevent.over?.id لتحديث الحالة. ويعرض DragOverlay معاينة عائمة تستند إلى بوابة.