dnd kit
@dnd-kit
useDraggable و useDroppable . ولن يجبرك على إعادة تصميم تطبيقك أو إنشاء عقد DOM مجمعة إضافية.@dnd-kit/sortable ، وهي طبقة رقيقة مبنية فوق @dnd-kit/core . المزيد من الإعدادات المسبقة القادمة في المستقبل. لمعرفة كيفية البدء باستخدام dnd kit ، تفضل بزيارة موقع التوثيق الرسمي. ستجد وثائق API ونصائح وأدلة متعمقة لمساعدتك في إنشاء واجهات السحب والإفلات.
تعرض المكتبة الأساسية لمجموعة dnd مفهومين رئيسيين:
قم بتعزيز مكوناتك الحالية باستخدام الخطافات useDraggable و useDroppable ، أو ادمجهما معًا لإنشاء مكونات يمكن سحبها وإسقاطها.
يمكنك التعامل مع الأحداث وتخصيص سلوك العناصر القابلة للسحب والمناطق القابلة للإسقاط باستخدام موفر <DndContext> . تكوين أجهزة الاستشعار للتعامل مع طرق الإدخال المختلفة.
استخدم مكون <DragOverlay> لعرض تراكب قابل للسحب تتم إزالته من تدفق المستند العادي ويتم وضعه بالنسبة إلى إطار العرض.
راجع دليل البدء السريع الخاص بنا لمعرفة كيفية البدء.
تعد القابلية للتوسعة جوهر مجموعة dnd . لقد تم تصميمها لتكون هزيلة وقابلة للتوسيع. يأتي مزودًا بالميزات التي نعتقد أن معظم الأشخاص سيحتاجونها في معظم الأوقات، ويوفر نقاط تمديد لبناء الباقي فوق @dnd-kit/core .
من الأمثلة الرئيسية على مستوى قابلية توسيع مجموعة dnd هو الإعداد المسبق القابل للفرز، والذي تم إنشاؤه باستخدام نقاط الامتداد التي تم كشفها بواسطة @dnd-kit/core .
نقاط الامتداد الأساسية لمجموعة dnd هي:
يعد إنشاء واجهات السحب والإفلات التي يمكن الوصول إليها أمرًا صعبًا؛ تحتوي مجموعة dnd على عدد من الإعدادات الافتراضية المعقولة ونقاط البداية لمساعدتك في تسهيل الوصول إلى واجهة السحب والإفلات:
aria التي يجب تمريرها إلى العناصر القابلة للسحبراجع دليل إمكانية الوصول الخاص بنا لمعرفة المزيد حول كيفية المساعدة في توفير تجربة أفضل لقارئات الشاشة.
على عكس معظم مكتبات السحب والإفلات، لم يتم إنشاء dnd kit عمدًا أعلى واجهة برمجة تطبيقات السحب والإفلات في HTML5. لقد كان هذا قرارًا معماريًا متعمدًا، ويأتي مع مقايضات يجب أن تكون على دراية بها قبل أن تقرر استخدامه، ولكن بالنسبة لمعظم التطبيقات، نعتقد أن الفوائد تفوق المفاضلات.
تحتوي واجهة برمجة تطبيقات السحب والإسقاط لـ HTML5 على بعض القيود الشديدة. وهو لا يدعم الأجهزة التي تعمل باللمس أو استخدام لوحة المفاتيح لسحب العناصر، مما يعني أن المكتبات المبنية فوقها تحتاج إلى الكشف عن تطبيق مختلف تمامًا لدعم طرق الإدخال هذه. كما أنه لا يدعم حالات الاستخدام الشائعة مثل قفل السحب إلى محور معين أو إلى حدود الحاوية، أو إستراتيجيات الكشف عن التصادم المخصصة، أو حتى تخصيص معاينة العنصر المسحوب.
على الرغم من وجود حلول بديلة لبعض هذه المشكلات، إلا أن هذه الحلول عادةً ما تزيد من تعقيد قاعدة التعليمات البرمجية وحجم الحزمة الإجمالي للمكتبة، وتؤدي إلى عدم تناسق بين طبقات الماوس واللمس ولوحة المفاتيح لأنها مدعومة بتطبيقات مختلفة تمامًا.
إن المفاضلة الرئيسية مع عدم استخدام واجهة برمجة تطبيقات السحب والإسقاط HTML5 هي أنك لن تتمكن من السحب من سطح المكتب أو بين النوافذ. إذا كانت حالة استخدام السحب والإفلات التي تفكر فيها تتضمن هذا النوع من الوظائف، فستحتاج بالتأكيد إلى استخدام مكتبة مبنية على واجهة برمجة تطبيقات السحب والإفلات HTML 5. ننصحك بشدة بمراجعة React-dnd بحثًا عن مكتبة React التي تحتوي على واجهة خلفية أصلية لسحب وإفلات HTML 5.
تتيح لك مجموعة dnd إنشاء واجهات السحب والإفلات دون الحاجة إلى تغيير DOM في كل مرة يحتاج فيها العنصر إلى تغيير موضعه.
هذا ممكن لأن dnd kit يقوم بحساب وتخزين المواضع الأولية والتخطيط للحاويات القابلة للإسقاط عند بدء عملية السحب. يتم تمرير هذه المواضع إلى مكوناتك التي تستخدم useDraggable و useDroppable بحيث يمكنك حساب المواضع الجديدة لعناصرك أثناء إجراء عملية السحب، ونقلها إلى مواضعها الجديدة باستخدام خصائص CSS الفعالة التي لا تؤدي إلى إعادة الرسم مثل translate3d scale . للحصول على مثال لكيفية تحقيق ذلك، تحقق من تنفيذ استراتيجيات الفرز التي تعرضها مكتبة @dnd-kit/sortable .
هذا لا يعني أنه لا يمكنك تغيير موضع العناصر في DOM أثناء السحب، فهذا شيء مدعوم وفي بعض الأحيان لا مفر منه. في بعض الحالات، لن يكون من الممكن معرفة الموضع والتخطيط الجديد للعنصر مسبقًا حتى تقوم بنقله في DOM. اعلم فقط أن هذا النوع من الطفرات في DOM أثناء السحب أكثر تكلفة بكثير وسيؤدي إلى إعادة الرسم، لذا، إذا أمكن، يفضل حساب المواضع الجديدة باستخدام translate3d و scale .
تستخدم مجموعة dnd أيضًا مستمعي الأحداث الاصطناعية لأحداث المنشط لجميع أجهزة الاستشعار، مما يؤدي إلى تحسين الأداء مقارنة بإضافة مستمعي الأحداث يدويًا إلى كل عقدة فردية قابلة للسحب.
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities ستحتاج إلى تثبيت كافة التبعيات في الدليل الجذر. نظرًا لأن @dnd-kit عبارة عن monorepo يستخدم مساحات عمل Lerna وYarn، فإن npm CLI غير مدعوم (فقط الغزل).
yarn installسيؤدي هذا إلى تثبيت جميع التبعيات في كل مشروع، وإنشائها، وربطها عبر Lerna
في أحد الأطراف، قم بتشغيل yarn start بالتوازي:
yarn start يؤدي هذا إلى إنشاء كل حزمة إلى <packages>/<package>/dist وتشغيل المشروع في وضع المراقبة، لذا فإن أي تعديلات تحفظها داخل <packages>/<package>/src تؤدي إلى إعادة البناء إلى <packages>/<package>/dist . سيتم بث النتائج إلى المحطة.
yarn start:storybookيقوم بتشغيل كتاب القصص افتح http://localhost:6006 لمشاهدته في المتصفح.
يمكنك اللعب بالحزم المحلية في الملعب الذي يعمل بالطرود.
yarn start:playground سيبدأ هذا الملعب على localhost:1234 . إذا كان لديك lerna قيد التشغيل في الوضع المتوازي في محطة واحدة، ثم قمت بتشغيل الطرد، فسيتم إعادة تحميل الملعب الخاص بك بشكل سريع عندما تقوم بإجراء تغييرات على أي وحدة مستوردة مصدرها داخل packages/*/src/* . لاحظ أنه لتحقيق ذلك، يمرر أمر start الخاص بكل حزمة إلى TDSX علامة --noClean . يؤدي هذا إلى منع انفجار الطرود بين عمليات إعادة البناء بسبب أخطاء "لم يتم العثور على الملف".
نصيحة هامة تتعلق بالسلامة: عند إضافة/تعديل الحزم في الملعب، استخدم كائن alias في package.json. سيؤدي هذا إلى إخبار Parcel بحلها إلى نظام الملفات بدلاً من محاولة تثبيت الحزمة من NPM. كما أنه يعمل على إصلاح أخطاء React المكررة التي قد تواجهها.
(في المحطة الثالثة) يمكنك تشغيل Cypress وسيجري اختبارات التكامل مع القصص القصيرة.
