طبقات السحب المخصصة والسحب والإفلات متعدد الحاويات

يعرض DragOverlay محتواه بوصفه بوابة React، ويلحقه مباشرةً بـ document.body بدلًا من وضعه داخل شجرة DOM الخاصة بـ DndContext. وهذا يعني أن حاويات overflow:hidden أو overflow:scroll لا تقصّه مطلقًا، وأنه يظهر دائمًا فوق جميع العناصر الأخرى من دون الحاجة إلى إدارة z-index يدويًا.

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

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

عند استخدام DragOverlay، ينبغي أن يتحول العنصر الأصلي القابل للسحب إلى عنصر نائب مرئي أثناء السحب. عند استخدام useSortable، طبّق opacity: 0 أو حدًا متقطعًا عندما تكون isDragging مساوية لـ true. ويُظهر ذلك «الموضع» الذي سيعود إليه العنصر إذا أُلغي السحب، كما يوضح الفجوة التي يتركها عند نقله إلى موضع جديد.

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

للحصول على حركة سلسة بين الحاويات، حدّث الحالة في onDragOver بدلًا من الانتظار حتى onDragEnd. عندما يعبر العنصر المسحوب إلى حاوية جديدة، انقله فورًا من الحاوية المصدر إلى الحاوية الهدف. ويمنح ذلك ملاحظات مرئية آنية توضّح للمستخدم المكان الذي سيستقر فيه العنصر.

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

يقبل useDraggable وuseSortable خيار data: useSortable({ id, data: { containerId, type } }). وتتوافر هذه البيانات في ردود نداء أحداث السحب بصيغة event.active.data.current. وفي سيناريوهات الحاويات المتعددة، يمكنك تخزين معرّف الحاوية المصدر في data واستخدامه في onDragOver لمعرفة مصدر العنصر.

تستخدم الحالة بين الحاويات المتعددة عادةً كائنًا مفهرسًا بمعرّف الحاوية، ويحتوي كل عنصر فيه على مصفوفة من العناصر. في onDragOver، عندما يكون العنصر النشط في حاوية مختلفة عن الحاوية الهدف، أزل العنصر من مصفوفة الحاوية المصدر وأدرجه في مصفوفة الحاوية الهدف في الموضع الصحيح.

يعمل KeyboardSensor مع السحب والإفلات بين الحاويات المتعددة. يضغط المستخدمون مفاتيح الأسهم للتنقل بين العناصر داخل الحاوية، وعند الوصول إلى حافتها يمكنهم متابعة التنقل إلى الحاويات المجاورة. وتحدد خوارزمية collisionDetection في SortableContext أقرب هدف إفلات صالح استنادًا إلى الموضع.

يقبل DndContext خاصية collisionDetection التي تحدد كيفية حسابه للعنصر القابل للإفلات الذي يوجد العنصر المسحوب فوقه. وتعمل closestCenter الافتراضية جيدًا مع معظم القوائم. وتناسب closestCorners الشبكات أكثر. أما pointerWithin فلا تنشّط العنصر القابل للإفلات إلا عندما يكون المؤشر داخل حدوده فعليًا.

يعرض DragOverlay محتواه بوصفه بوابة إلى document.body، مما يوفر استقلالًا مرئيًا عن قيود التخطيط. تتبّع activeDragId في onDragStart وonDragEnd لعرض محتوى المعاينة الصحيح. ويستخدم السحب والإفلات بين حاويات متعددة مثيلات SortableContext متعددة داخل DndContext واحد، مع معرّفات فريدة عالميًا. حدّث الحالة في onDragOver للحصول على حركات سلسة بين الحاويات، باستخدام event.active.data.current لبيانات الحاوية المصدر.