React-dnd: من يستخدم React DnD؟

• المشروع: https://github.com/WikiEducationFoundation/WikiEduDashboard
• الفائدة: جدا
• المشاكل: كانت الرسوم المتحركة التي تحركها الدولة هي الجزء الأصعب. انتهى بي الأمر بمجموعة من مجموعات انتقالية لحركة التفاعل والتفاعل. ثم اضطررت إلى إدارة حالة إضافية للأشياء التي كانت في منتصف الرسوم المتحركة لمنعها من أن تكون أهدافًا أثناء التحريك. انتهى بي الأمر باستخدام https://github.com/yahoo/react-dnd-touch-backend ، والتي كانت لها مشكلاتها الخاصة (يتم تحديد النص أثناء السحب) ولكن كانت الرسوم المتحركة _during_ أكثر قابلية للتحكم. ربما قضيت حوالي 4 أيام عمل في هذه الميزة والحصول على الرسوم المتحركة بشكل صحيح ، والتي ربما كانت ستستغرق وقتًا أقل بكثير في تطبيق غير متفاعل.

_- ما هي المنتجات التي تستخدم فيها React DnD؟ _

أنا أستخدمه في العديد من التطبيقات (لوحة Kanban ، وتطبيقات خط الأعمال)

_- ما مدى فائدة وجدتها؟ _

قبل React DnD ، جربت جميع حلول DnD التي يمكن أن أجدها ، سواء على أساس التفاعل أو الاستفسار ، و React DnD يأتي بعد أميال.

_- كم مرة لديك مشاكل معها ، وما مدى إحباطها؟ _

منذ الإصدار 1.0 ، لم أواجه أية مشكلات. تجدر الإشارة إلى أنني لا أقوم إلا بدعم المتصفحات الحديثة على منتجاتي.

_- ما هي الميزات التي تهتم بها؟ _

أنا أستخدم جميع الميزات ، في مجموعات مختلفة في مناطق مختلفة.

_- هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟ _

لقد دمجته بالأمس مع مشروع خاص (لا يمكنني تقديم شاشات الآن ، آسف) ، ووجدت الوثائق الموجودة رائعة. النهج نظيف وسهل الفهم وبسيط في الزيادة وودي بشكل عام.

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

ما هي المنتجات التي تستخدم فيها React DnD؟

نستخدمه في وحدة تحكم الويب الجديدة الخاصة بنا في Treasure Data. لقد استخدمته أيضًا في المشاريع الشخصية.

ما مدى فائدة وجدتها؟

مفيد جدا. إنه بسهولة أفضل سحب وإسقاط lib استخدمته. أنا واثق تمامًا من أنه يمكن استخدامه لتنفيذ تفاعلات السحب والإفلات المعقدة بسهولة.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

في كل مرة أستخدم فيها المكتبة ، يستغرق الأمر بعض الوقت لأتذكر كيف يتم تجميعها جميعًا: أين يذهب كل جزء وماذا يفعل. يحدث هذا حتى بعد استخدامه عدة مرات.

ربما وجود تصور لإظهار جميع الأجزاء سيجعل من السهل تذكرها.

بشكل عام ، يبدو أن المكتبة تفعل كل ما أحتاجه للقيام به.

ما الميزات التي تهتم بها؟

قابلية الاختبار! كانت تجاربي السابقة مع السحب والإفلات سيئة نوعًا ما ، ولم يختبر أحد الكود المرتبط بالسحب والإفلات.

لم أفعل أي نوع من دعم الهاتف المحمول ، لكنني لا أعرف كيف سأستهدف كل من سطح المكتب والجوال.

لقد رأيت رد الفعل-dnd-touch-backend ، لكنني لا أعرف كيف يمكنني المزج بينهما.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

https://gfycat.com/ScientificEvilAmericanbadger

هذا في الأساس أنا فقط ألعب. رد فعل dnd يجعل من السهل تنفيذ منطقة إفلات الملف.

ما هي المنتجات التي تستخدم فيها React DnD؟

codecks.io لا يزال قيد التطوير ولكنه قريب من الوصول المبكر

ما مدى فائدة وجدتها؟

كثير. تطبيع سلوك المتصفح وتقديم نهج رد فعل dnd يجعل هذه المكتبة لا تفكر بالنسبة لي

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

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

ما الميزات التي تهتم بها؟

تطبيع المتصفح ، ودعم تفاعلات اللمس

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

https://gfycat.com/CleanLegitimateAracari

لقد استخدمت React DnD في عملي لدرجة الدكتوراه في محرك بحث لأرشيفات التصوير الطبي. يسمح لي بسحب نتائج البحث لتصبح جزءًا من الاستعلام (إنتاج صور مماثلة). لو لم تكن هناك مكتبة مثل هذه ، كنت سأضطر إلى العبث بواجهة برمجة تطبيقات HTML5 والتأكد من أنها تعمل جيدًا جنبًا إلى جنب مع React. أي شيء يتيح لي التركيز على الأمور الأكثر أهمية هو الذهب!

لم أواجه أية مشكلات خطيرة ، ولكن الانتقال من 0.x إلى 1.x كان محيرًا للغاية ومثالًا جيدًا على عدم استخدام علامات dist بشكل صحيح (تم إصدار 1.0.0-rc كـ latest بدون تحديث توثيق). هذا هو كل الماء تحت الجسر ، على أي حال. :)

تم إصدار 1.0.0-rc كأحدث إصدار بدون توثيق محدث

نعم ، كان هذا قبل أن أتعلم كيف تعمل علامات التوزيع. :مرح:

ما هي المنتجات التي تستخدم فيها React DnD؟

استخدامه لمشروع عميل لديه الكثير من تفاعل السحب والإفلات. بعض المكونات البارزة هي:

• عرض الشجرة حيث يمكنك فرز العقد وتداخلها
• طريقة عرض القائمة / البطاقة المشابهة لـ Trello ، تدعم الفرز فقط.

إنها أيضًا أداة تعاون ، لذا يتم إرسال معظم تحديثات الواجهة إلى خادم مقبس.

ما مدى فائدة وجدتها؟

مفيد جدًا ، من السهل جدًا فصل منطق السحب عن المكون الخاص بك واختباره بشكل فردي.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

نواجه الكثير من المشاكل في عرض الشجرة الذي يدعم التداخل والفرز ،

كانت إحدى أكبر المشكلات التي واجهناها هي تنفيذ عرض الشجرة الذي يدعم التداخل والفرز.

لدينا أنواع مختلفة من العقد (مجلدات ، قوائم). يمكن للمستخدم إما إسقاط شيء ما في مجلد مما يؤدي إلى تداخله أو ترتيبه أسفل أو أعلى عقدة أخرى. يأتي هذا التفاعل مع الكثير من الخفقان وبعض السلوكيات التي تجرها الدواب وأحيانًا انخفاض في الأداء. شاهد هذا الفيديو: http://s.2to1.be/fAtX ،

الطريقة التي يعمل بها هي كما يلي:

1. يبدأ المستخدم في سحب العقدة ، وتبقى العقدة في مكانها
2. يحوم المستخدم فوق عقدة -> يعرض مؤشرًا للموضع الجديد ، ويتم إرسال موضع هذا بإجراء إعادة. (الشجرة بأكملها جزء من حالة التطبيق).
3. ينهي المستخدم السحب الذي يرسل إجراءً يستمر في الموضع الجديد للعقدة على الخادم وينقلها إلى جميع عملاء المقبس المتصلين.

نستخدم حاليًا بعض الرياضيات (تباين في المثال القابل للفرز في هذا الريبو) لحساب سواء كانت العقدة موجودة أو أسفل / أعلى مجلد. في البداية حاولت أن أجعل المكوِّن Folder DropTarget لكن ذلك لم يفلح لأنني لم أتمكن من فرز Node DropTarget الآخر

ما الميزات التي تهتم بها؟

• قابلية الاختبار
• تبديل الخلفيات
• التعلق بالأحداث
• دعم المتصفح

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

انظر الفيديو أعلاه

لقد أضفت للتو رد فعل-dnd الأسبوع الماضي إلى تطبيق ويب تعليمي (لم يصدر بعد). انه رائع! شكرا جزيلا لعملك!

أكبر مكسب IMO هو أن رد فعل dnd يوفر فقط المستوى الصحيح من التجريد لإدارة وظائف DnD عبر التطبيق بأكمله.

إلى جانب القدرة على التخلص من التركيبة المحرجة من مكونات السحب المعزولة ذات الحجم الواحد الذي يناسب الجميع (قابلة للفرز ، وما إلى ذلك) ، تمكنت من إضافة بعض الوظائف القائمة على السحب في غضون ساعات كنت قد شطبتها سابقًا على أنها معقدة للغاية ليكون يستحق ذلك (على سبيل المثال ، سحب بطاقة لإعادة الفرز ضمن قائمتها أو على أيقونة قائمة المستخدمين لإظهار قائمة مستخدمين ، ثم إسقاطها على المستخدم المناسب).

كانت المشكلة الوحيدة التي واجهتها حتى الآن هي الخلفية اللمسية ، لكنني تمكنت من إجراء اختراق سريع للمضي قدمًا وعلق أحدهم على أنه يعمل على طلب سحب أكثر عمومية.

الميزة الرئيسية التي أهتم بها نظرًا لواجهة برمجة التطبيقات الرائعة بالفعل هي دعم اللمس القوي.

أتحدث شخصيًا عن سبب عدم تقديم طلبات سحب لمشاريع مفتوحة المصدر (حتى الآن ، على أي حال) ... أنا مصمم. على الرغم من أنني أستخدم هذه الأداة ، على سبيل المثال ، فإن رأسي يفكر بشكل طبيعي في أنواع مختلفة جدًا من المشكلات. إلى جانب عدم كوني جيدة في حل المشكلات التي تظهر في مكتبات مثل هذه ، فهذا ليس نوع العمل الذي أقوم به عادةً ولن "أثق" بحل. أعلم أن هناك قدرًا من الأنانية هنا ، لكني أتخيل أن هناك أكثر من عدد قليل من المصممين الذين يصادفون أيضًا البرمجة في تطوير الواجهة الأمامية والذين يتصرفون بهذه الطريقة. أنا ممتن جدًا للأشخاص مثلك الذين يرغبون في مساعدة المصممين مثلي بالأدوات التي تجعل تعقيدات تطوير التطبيق أقرب إلى التوافق مع تعقيدات تصميم المنتج بحيث يكون التنقل بين المجالات أقل إثارة للقلق.

لمعلوماتك ، أنا أستخدم رد الفعل-dnd بالاشتراك مع رد الفعل-التقليب-الحركة لتحريك تغييرات التخطيط. لقد مرت بضعة أيام فقط ، لكن يبدو أنهما رائعان معًا.

تضمين التغريدة

ان هذا قد ابهجني فعلا. :قلب:

_ما هي المنتجات التي تستخدم فيها React DnD؟ _
المنتج لا يزال قيد اللفائف.

_ما هي الفائدة التي تجدها؟ _
مفيد جدًا ، لدينا الكثير من أنواع السحب والإفلات. ساعد الحفاظ على منطق DnD داخل المكونات أدمغتنا على إدارة كل التعقيدات.

_ كم مرة تواجهك مشاكل معها ، وما مدى إحباطها؟ _
لدينا بعض المشكلات المتعلقة بالأداء بسبب الحجم الهائل لأهداف الإسقاط التي نسجلها. وإلا فإنه يعمل بشكل رائع!

_ما الميزات التي تهتم بها؟ _
التوافق مع الأداء مع SVG.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟
ليس بالكامل ، ولكن هذا سيمنحك فكرة عن المشكلة التي نحاول حلها باستخدام React-DnD.

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

شكراً جزيلاً جزيلاً على هذه المكتبة الرائعة!

هذا منقذ للحياة إذا كنت تستخدم رد الفعل وعليك القيام بأشياء dnd. عمل عظيم!

أستخدم React DND في برنامج إدارة النقل الخاص بنا. حتى الآن ليس لدي أي مشاكل على الإطلاق.

يقوم المستخدم بسحب توقفات التسليم حولها ورؤيتها مباشرة على الخريطة مع المسافات المحسوبة.

ما هي المنتجات التي تستخدم فيها React DnD؟

نظام إدارة محتوى قائم على السحب والإسقاط (إصدار تجريبي داخلي آخر ، يتم إطلاقه للعميل في أبريل)

ما مدى فائدة وجدتها؟

بشكل هائل. على الرغم من أن واجهة برمجة التطبيقات ليست _بالتالي _ مباشرة مثل بعض مكونات الطرف الثالث الأخرى ، إلا أنها قوية للغاية وتتيح لك فعل ما تحتاج إليه.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

نادرا وغير محبط للغاية.

ما الميزات التي تهتم بها؟

الاستقرار ومقاومة الرصاص عبر المتصفح.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

ما هي المنتجات التي تستخدم فيها React DnD؟

نحن نستخدم React DnD في تطبيق الويب Asana ، لجميع الأماكن التي نستخدم فيها السحب والإفلات. لاحظ أننا نقوم حاليًا بإعادة كتابة تطبيقنا من إطار عمل Luna الداخلي لدينا إلى React ، ونستخدم React DnD أثناء إعادة الكتابة في جميع الأماكن التي نستخدم فيها السحب والإفلات.

ما مدى فائدة وجدتها؟

لقد وجدناها مفيدة جدا. من السهل التعامل مع واجهة برمجة التطبيقات ، وتتيح لنا فصل الاهتمامات بشكل واضح عن طريق الاحتفاظ بالسحب والإفلات داخل مكونات قليلة.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

بخلاف الزيادة الأولية ، لا نواجه مشكلات في كثير من الأحيان. نحن نستخدم React DnD مع TypeScript ، وأعتقد أن كتابة تعريفات النوع قللت من فترة التكثيف بالنسبة لنا (حيث كان علينا استكشاف واجهة برمجة التطبيقات بالكامل في هذه العملية). الآن ، تدور مشكلاتنا بشكل عام حول الاختبار (على سبيل المثال ، التنظيف بين الاختبارات ، والمساعدين الداخليين للعمل مع المكونات المزينة dnd ، وما إلى ذلك). قد يكون هذا محبطًا في بعض الأحيان ، ولكن بدرجة أقل الآن بعد أن أصبح لدينا بعض المكونات ذات الاستخدام العام لاستخدامها أو أمثلة على المكونات لبناء المكونات المستقبلية عليها.

ما الميزات التي تهتم بها؟

الأداء ، فصل الاهتمامات ، قابلية الاختبار

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

epelz ربما يجب أن تحصل على أسانا لرعايته وإلا فإن المشروع سيتباطأ

قد يكون إما https://github.com/Asana أو https://github.com/FogCreek ، الذين يصنعون Trello الذي يستخدم التفاعل-dnd ، رعاة رائعين.

gaearon أفضل حتى الآن لديك الفيسبوك الراعي لها

ما هي المنتجات التي تستخدم فيها React DnD؟

الجيل القادم من واجهة المستخدم الخاصة بنا.

ما مدى فائدة وجدتها؟

لأقصى حد! تعجبني المستندات ولكن يمكنها استخدام المزيد من الأمثلة الواقعية.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

واجهت للتو مشكلة عند تزيين أحد المكونات باستخدام DragSource والتي تمنع تنفيذ التابع componentWillUpdate عند تغيير الخاصيات. محبط للغاية لذا أعتقد أنه يجب علي تقديم تقرير عن الخطأ. أعتقد أنه أنا وليس أنت رغم ذلك. ؛)

ما الميزات التي تهتم بها؟

الأداء والاستقرار ودعم اللمس.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

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

ما هي المنتجات التي تستخدم فيها React DnD؟

نحن في teleport نستخدم React DnD في منتج Zen (قائمة التحقق المتحركة) لإعادة ترتيب المهام وتصنيفها.

أيضًا ، قمنا للتو ببناء مكون عرض الشجرة القابل لإعادة الاستخدام رد فعل-dnd-treeview مع دعم DnD المنفذ باستخدام React DnD للاستخدام في مشروع داخلي حاليًا. استخدمنا شجرة تفاعل ui في البداية ولكن لم نتمكن من الحصول على تجربة المستخدم بشكل صحيح ، ولدينا تجربة إيجابية مع React DnD ، لذلك قمنا بتطبيق منطقتنا. المكون في مراحل مبكرة حقًا ، لذلك لا توجد وثائق أو CI وما إلى ذلك ، ولكن أي ملاحظات ستكون موضع ترحيب!

ما مدى فائدة وجدتها؟

بينما استغرق الأمر بعض الوقت لفهم النموذج ، التصميم نظيف حقًا وقررنا استخدامه في كل مكان نحتاج إليه DnD. لذا ، من المفيد جدا.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

حتى الآن لدينا مشكلتان:

• الحصول على تجربة السحب الصحيحة مع الخلفية اللمسية (بما في ذلك الأداء)
• في البداية ، حاولت تطبيق منطق منطقة الإسقاط في JS لكنني تعثرت بسبب عدم القدرة على الحصول على الإحداثيات النسبية للهدف الصحيحة (لتحديد ما إذا كنت ستسقط أعلى أو أسفل الهدف) من React DnD ، قررت في النهاية إنشاء عناصر DOM متراكبة منفصلة كأهداف الإسقاط.

ما الميزات التي تهتم بها؟

الأداء ، إخفاء المراوغات في المتصفحات / الأنظمة الأساسية.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

النقل الفضائي زين:

رد فعل dnd-treeview:

ما هي المنتجات التي تستخدم فيها React DnD؟
Discord - https://discordapp.com - دردشة صوتية ونصية للاعبين

ما مدى فائدة وجدتها؟
جدا!

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟
نادرا ، 5/10 محبط.

ما الميزات التي تهتم بها؟
كل الوظائف الحالية.

لقد أوشكنا على استخدام رد الفعل-dnd لعميل سطح المكتب Slack ، ولكن للأسف واجهنا حدين اتضح أنهما عاملان يكسران الصفقات:

1. ليس من الممكن تخصيص منطق السحب (أي المنطق الذي يحسب حالة السحب ، مثلما يحدث عندما يكون السحب قيد التقدم).
   
   
   
   • من السهل جدًا تغيير المكونات استجابةً للدعائم المتغيرة المحقونة من حالة السحب. من السهل أيضًا تخصيص معاينة السحب باستخدام مكون React مخصص. ولكن لسوء الحظ ، لا يمكن للبيانات التي ترفقها بعملية السحب سوى إرفاق المؤشر وتتبعه. هذا يستبعد تجربة المستخدم كما لدينا حاليًا مع الشريط الجانبي ، حيث يمكنك سحب أيقونات الفريق حولها لإعادة ترتيبها ، وتقتصر عمليات السحب هذه على المحور ص فقط. باستخدام رد الفعل-dnd ، يمكنك بسهولة تقييد معاينة السحب على محور واحد ، ولكن من المستحيل تقييد البيانات المرفقة بالمؤشر أثناء السحب. هذا يعني أنه إذا قمت بتحريك المؤشر بعيدًا عن الشريط الجانبي أفقيًا ، ولكن المؤشر لا يزال عموديًا "فوق" هدف الإسقاط ، فلن يسمح رد الفعل لهدف الإسقاط بالاستجابة على الإطلاق. (انظر GIF أدناه لمعرفة السلوك الذي لدينا حاليًا دون رد الفعل 👇)
     
     
   
   
2. يؤدي استخدام طبقة سحب مخصصة إلى حظر حلقة تصيير React العادية إذا كنت تقوم بأشياء على hover . نظرًا لأنه يتعين عليك إنشاء مكون React إضافي إذا كنت تريد طبقة سحب مخصصة ، وتعمل طبقة السحب هذه عن طريق تغيير موضعها استجابةً لتغييرات props من شاشات dnd ، ينتهي الأمر بالحصول على render() تسمى _a lot_. هذه مشكلة فقط إذا كنت تخطط لإعادة عرض أي مكونات أخرى (على الأرجح أهداف إسقاط أخرى) على hover بينما تقوم بسحب DragSource حولك. تمكنا من التخفيف من هذا إلى حد ما عن طريق تغيير الحالة على hover بشكل غير متزامن والعودة مبكرًا عند التمرير إذا لم يتغير هدف الإسقاط ، ولكن لا يزال هناك تأخر ملحوظ عند تغيير أهداف الإسقاط أثناء التحويم.

نأمل أن تكون هذه التعليقات مفيدة! لقد استمتعت بالعمل مع response-dnd أثناء بحثي عن إمكانية استخدامه في تطبيق Slack ، وأود أن أرى أنه يتغلب على هذه القيود إذا كان ذلك ممكنًا على الإطلاق.

ما هي المنتجات التي تستخدم فيها React DnD؟

نستخدمه في tylio ، طريقة جديدة لإنشاء صفحات الويب. يقع React-dnd في المقدمة وفي المنتصف على الصفحة حيث تقوم بتحميل المحتوى الخاص بك.

ما مدى فائدة وجدتها؟

مفيد جدا؛ من الصعب بعض الشيء أن تلف رأسك حوله في البداية ، لأنك تحتاج إلى فهم جميع الأجزاء المتحركة في وقت واحد ، ولكن بمجرد أن تنقر ، فأنت على ما يرام.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟

إن حالتنا معقدة للغاية ، حيث إننا نعيد ترتيب وننقل العناصر بأحجام مختلفة حولها ، ولا نريدها أن تتقلب. كان لدي بعض المشاكل معها ، لكن أعتقد أن الأمر يتعلق بكيفية استخدامها أكثر من المكتبة نفسها.

ما الميزات التي تهتم بها؟

جميلة عن كثير منها! نحن نستخدم أنواعًا مختلفة من مصادر السحب وأهداف الإفلات والملفات الأصلية / عناوين urls / النصوص و HTML5 وخلفية اللمس مع طبقة سحب مخصصة.

هل يمكنك إرفاق بضع لقطات شاشة لمنتجك؟

إذا كان أي شخص يستخدمه مع Typescript ، فهل يمكنك تقديم مثال أساسي؟ لقد علقت مع هذا الخطأ:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

أستخدمه بهذه الطريقة:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

لا أعرف ما إذا كان الوقت قد فات على المشاركة ، لكنني أردت تقديم بعض التعليقات (التي آمل أن تكون بناءة).

لقد وجدت أن React-DnD يصعب استيعابها (وتنفيذها). يحتوي على العديد من الأجزاء المتحركة والإعداد متورط تمامًا. كنت أتمنى أن يكون لدي شيء أكثر من ذلك "plug-n-play". وربما يرجع السبب في ذلك إلى أنه يحاول أن يكون العديد من الأشياء المختلفة (أهداف السحب / الإفلات ، وإعادة ترتيب القائمة ، وما إلى ذلك). لكنني انتهيت من اتباع نهج مختلف ، والذي كان في الأساس مجرد وضع أزرار على كل عنصر وإعادة الترتيب بهذه الطريقة ، جنبًا إلى جنب مع رد الفعل-التقليب-الحركة لتحريك الحركة.

أرغب في رؤية مفترق من هذا يركز فقط على إعادة ترتيب القائمة ، ويبقي الأمر بسيطًا للغاية لجعله يعمل.

بدأنا في استخدامه على منتج مملوك واسع النطاق تم إنشاؤه باستخدام React و Redux. نستخدم رد فعل dnd لإدارة جوانب السحب والإفلات لجميع الأشياء باستثناء عناصر SVG في التطبيق. لديها فقط طبقة التجريد الصحيحة. في الواقع ، لدينا شيء مشابه جدًا داخليًا للشفرة يسبق React وهو مدعوم بأحداث الماوس.

الشيء الوحيد الذي أتمنى أن يكون رد الفعل هو الواجهة الخلفية التي تستند إلى أحداث الماوس ، لذا فهي تعمل مع عناصر SVG أيضًا.

راجع للشغل ، أنا بصدد كتابة تعريف انسيابي له بناءً على تعريف TypeScript ، حيث أن التعريف الموجود على الكتابة الانسيابية غير مكتمل.

واو ، الكثير من المدخلات! هذه الكثير من البيانات للذهاب من خلال! سأقوم بإغلاق هذه القضية. شكرا للجميع لأخذ الوقت الكافي لتقديم التعليقات!

أخطط لتحديث بعض الوثائق في الأسابيع القليلة المقبلة ، وأحد أفكاري هو إنشاء عرض للمشروعات والتطبيقات باستخدام React DND. سأقوم بإنشاء مشكلة متابعة لالتقاط تلك المشاريع عندما أتحرك لبدء المشروع!

💜

mnquintana ملاحظات شيقة جدًا - هل انتهيت أنت والفريق باستخدام مكتبة سحب وإفلات أخرى أو مجرد إنشاء شيء ما بالكامل من الصفر؟

mnquintana سيكون رائعًا حقًا لمعرفة ما فعلته للتغلب على هذا ، أو الأفضل من ذلك ، قم بإصدار مكتبة dnd الخاصة بهم!

epelz بحاجة لمساعدتكم. هل قمت بإنشاء مكون سحب وإفلات قابل لإعادة الاستخدام لسحب البطاقات في لوحة المعلومات والعناصر الموجودة في القائمة أو باستخدام مكون منفصل للبطاقات والقائمة. سأكون ممتنا حقا إذا كنت تستطيع الرد.

أعلم أن هذا موضوع مناقشة قديم جدًا ولكني أردت المساهمة على أي حال. إيفرنوت
🐘 يستخدم رد فعل dnd في الوقت الحالي لمنتج Spaces الجديد للأعمال! لقد تعلمنا الكثير وقد نحاول مشاركة ما تعلمناه إذا كان الناس مهتمين :)

ما هي المنتجات التي تستخدم فيها React DnD؟
https://evernote.com/business

ما مدى فائدة وجدتها؟
مفيد جدا! لقد كان منحنى تعليميًا حادًا ولكننا جعلناه نفعل معظم ما نريد القيام به.

كم مرة لديك مشاكل معها ، وما مدى إحباطها؟
أشعر أن هناك بعض العوائق الكبيرة للمبتدئين وبعض الأشياء مثيرة للاهتمام للتعامل معها. بعض الأخطاء المتعلقة بتأثيرات التمرير والإفلات جعلتنا في حيرة من أمرنا ولكن بالنظر إليها أكثر ، يبدو أن بعضها مجرد قيود مع التنفيذ الأصلي للسحب / الإسقاط في HTML5 (يبدو أن تأثيرات الإسقاط على وجه التحديد تتجاوز المؤشر الذي تريد تطبيقه حتى نتمكن من ذلك. لا تستفيد من أشياء مثل cursor: no-drop . إنه لأمر ذكي حقًا أنك صنعته حتى تتمكن من تنفيذ الخلفيات الخاصة بك إذا لزم الأمر ولم نجرؤ على تجربة الواجهة الخلفية اللمسية حتى الآن.

لقد قضينا وقتًا ممتعًا في ربط الأذونات. يتطلب سحب الملاحظات وإفلاتها الكثير من الأشياء لمعرفة ما إذا كان بإمكاننا تحريك و / أو إسقاط شيء ما. وجدنا أيضًا أنه كان علينا إعادة تنفيذ التلاشي الأصلي والسحب للخلف إلى عنصر DOM الرئيسي عندما لا نجد مكانًا لإسقاط أنفسنا في CustomDragLayer (قد يكون هذا مثالًا يمكننا المساهمة فيه).

ما الميزات التي تهتم بها؟
نحن نتطلع إلى تنفيذ عمليات السحب والإفلات المتعددة ولا يبدو أن هناك طريقة نظيفة للقيام بذلك باستخدام React-Dnd مما نعرفه؟ نحن نتطلع أكثر إلى ذلك بالرغم من ذلك. عندما نتعمق أكثر سنشارك المزيد.

augbog لست متأكدًا مما إذا كنت قد جربته ، ولكن هل نظرت في تنفيذ Gaeron في المنشور الأول في الإصدار رقم 14 واستخدام طبقة سحب مخصصة؟

بطريقة ما ، هذا السيناريو ممكن بالفعل: يمكن للمستهلكين تتبع العناصر المحددة يدويًا ، وتعيين السحب معاينة إلى نوع ما من صورة العنصر النائب العام والتفاعل بشكل مناسب مع إسقاط (فيما يتعلق بمنطق العمل) عدة عناصر.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

شكرًا @ JM-Mendez ، نعم ، لقد رأينا ذلك وكنا قلقين بشأن تعليق المتابعة بخصوص وجود مكونات متعددة مع العلم أنه تم سحبها ولكن بعد إعادة قراءتها ، قد لا تؤثر علينا في الواقع ، لذلك ما زلنا نبحث في الأمر :) شكرًا للدعوة على ذلك!

لا تزال لا توجد خلفية خلفية لإطار iframe المتقاطع أو النافذة الأصلية لسحب إطار iframe الفرعي. gaearon رأيت تعليقك بخصوص هذه المشكلة على عدد قليل من سلاسل الرسائل ، أود أن أقول إن هذا هو السبب الوحيد الذي اضطررت لاستخدام حل js الخالص لمشروعي.

(تحرير) أعتقد أن هذه ميزة مفيدة حقًا لأي شخص يحاول إنشاء أداة إنشاء صفحات السحب والإفلات.