React-dnd: لا يوجد تمرير تلقائي عند السحب

يوجد هذا الحل للتفاعل: https://github.com/azuqua/react-dnd-scrollzone
ربما يمكن إغلاق هذه المشكلة الآنdarthtrevino

يرجى المطورين الفرز ، وتقديم بعض الحلول لهذا.

كيف تستخدمه هل يمكنك البحث عني؟ تضمين التغريدة

AsceticBoy لا يمكنني القيام بعمل أفضل من README ، العديد من الأمثلة هناك

لقد قمت بتنفيذ هذا بنفسي. تمت إضافة حاوية القائمة بشكل أساسي كهدف إسقاط.

مستخدم: findDOMNode(component).getBoundingClientRect()
لمعرفة متى كنت على جانبي حاوية القائمة

ثم: listContainerDOMNode.scrollLeft += someValue
للتمرير في القائمة ، والتي تقوم بالتمرير في حاوية القائمة.

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

هل قام أي شخص بحل هذا ، التمرير في حاوية القائمة عندما لا يزال المؤشر؟

تضمين التغريدة رد فعل- dnd-scrollzone يعمل كسحر :)

أعلم أن هذا خيط قديم ولكنه لا يزال مفتوحًا ...

نجح أي شخص في إعداد react-dnd-scrollzone مع WindowScroller من react-virtualized بالترادف. وإذا كان الأمر كذلك ، فهل يمكنك مشاركة التنفيذ.

أنا أستخدم مزيجًا من WindowScroller و AutoSizer و List ؛ ولم نتمكن من الحصول على scrollzone يعمل بشكل صحيح.

أدركت أن مشكلتي هي أنني أستخدم scrollElement مخصصًا مع WindowScroller ، حيث يقوم react-dnd-scrollzone بتعيين الحاوية كعنصر يلتف. أنا أطلبه لإضافة عنصر تمرير مخصص.

يبدو أن رد فعل- dnd-scrollzone لم يعد يعمل مع أحدث رد فعل- dnd. يجب أن يكون تمرير السحب IMO جزءًا من قلب رد الفعل.

أدناه هو الحل الخاص بي:

const autoScrollInSafari = (step = 4) => (fn) => {
  const inSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (inSafari) {
    return function (p, m, c) {
      const scrollDOM = document.querySelector('.your-scroll-dom-class');
      if (scrollDOM) {
        const cursor = m.getClientOffset();
        const rect = scrollDOM.getBoundingClientRect();
        if (cursor.y - rect.top < 50) scrollDOM.scrollTop -= step;
        if (rect.bottom - cursor.y < 50) scrollDOM.scrollTop += step;
        if (cursor.x - rect.left < 50) scrollDOM.scrollLeft -= step;
        if (rect.right - cursor.x < 50) scrollDOM.scrollLeft += step;
      }
      fn.apply(this, [p, m, c]);
    };
  }

  return fn;
};

const myDropSpec = {
  drop() {
    // your drop callback
  },
  hover: autoScrollInSafari((props, monitor, component) => {
    // your hover callback
  }),
}

نأمل أن تكون هذه المساعدة. :ابتسامة:

شوكة محدثة من scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) تعمل مع إصدارات أكثر حداثة من رد الفعل حتى 7.0.2. بعد هذا الإصدار ، نقل رد فعل Dnd DragDropContext مما ينتج هذا الخطأ.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

Soundvessel كان ذلك بسبب ميزة CommonJS / ESModule ، والتي ربما كان من المفترض أن تكون نسخة رئيسية مقطوعة (سيئتي!). يمكنك العثور عليه عند react-dnd/lib/cjs/DragDropContext أو يمكنك استيراده من المستوى الأعلى react-dnd

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

هل وجد أي شخص حلاً للعمل مع أحدث إصدار من رد فعل dnd؟

شوكة محدثة من scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) تعمل مع إصدارات أكثر حداثة من رد الفعل حتى 7.0.2. بعد هذا الإصدار ، نقل رد فعل Dnd DragDropContext مما ينتج هذا الخطأ.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

Soundvessel هل قمت بتطبيق الإصلاح المقترح @ darthtrevino ؟

نظرًا لأنني لم أتمكن من العثور على حل خارج الصندوق ، وبعض الحلول لا تعمل مع أحدث إصدار من رد الفعل ، فقد توصلت إلى حل بنفسي: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

اتمنى ان يساعد شخص اخر

تضمين التغريدة
مرحبًا ، هل يمكن تنفيذه في مثال اختبار التحمل هذا؟ https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

حاولت قليلا ولكن بلا نجاح.

@ MartinN3 هنا لديك صديقي: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

يجب عليك تحديثه وفقًا لمتطلباتك ، والإزاحة ، وحاويات div (ربما أكثر من 1) ، وسرعة التمرير (باستخدام متغير PX_DIFF) ، إلخ.

تذكر أن ميزة التمرير تعمل خارج الصندوق في Chrome.

نظرًا لأنني لم أتمكن من العثور على حل خارج الصندوق ، وبعض الحلول لا تعمل مع أحدث إصدار من رد الفعل ، فقد توصلت إلى حل بنفسي: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

اتمنى ان يساعد شخص اخر

هذا هو الحل الافضل. شكرا جزيلا على الحل :)