React-dnd: لا يعمل React DnD على Chrome 59

ليست الحقيبه، ليست القضيه؛ إنه يعمل بشكل جيد تمامًا. جرب تشغيل Chrome بدون أي ملحقات

techie هل قمت بفحص نظام Mac على Windows؟ يعمل بشكل طبيعي على نظام Mac.

راجعت على ماك. هل هي مشكلة في منصة معينة؟

techie لسبب ما ، لا تتسبب في رد فعل "السحب" كالمعتاد. لقد اختبرت على جهازين ، جهاز Mac واحد لديه نفس المشكلة ، كل Windows به هذه المشكلة. اي فكرة؟

لقد اختبرت على أنظمة أساسية متعددة Windows 8.1 / Windows 7 على Chrome وأيضًا على IE 10 و IE 11. إنه يعمل بشكل جيد بالنسبة لي.

hunterbmt - هل ترى أي أخطاء في وحدة التحكم؟ هل يمكنك مشاركة صورة GIF لبعض السياق؟

techie الذي اختبرته على موقع مثال للتفاعل dnd ، لم يكن لدي أي مشكلة. ولكن في تطبيقنا ، لم يقم Chrome 59 بتشغيل "السحب" في بعض السيناريوهات التي تعمل بشكل طبيعي تمامًا على Chrome 58 و FF و Safari وحتى IE.
لقد أصلحت عن طريق تشغيل "السحب" يدويًا بعد "الإفلات" إذا لم يقم المتصفح بتشغيله بعد فترة.
لا أعرف ما إذا كان الآخرون قد فشلوا في هذه المشكلة أيضًا ، إذا كان الأمر كذلك ، فيمكنني نقل الإصلاح إلى رد الفعل.

بالنظر إلى التغيير في Chrome 59 ولكن لم أجد أي شيء ، إذا كان لديك أي فكرة ، فسوف أقدر المدخلات كثيرًا.

hunterbmt أعتقد أنه يمكن أن يكون شيئًا غريبًا في التعليمات البرمجية الخاصة بك ؛ حتى أنني استخدمت رد فعل dnd في حالات متعددة وكلها تعمل بشكل جيد على Chrome 59.

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

لدي نفس المشكلة في Chrome 59.0.3071.86 على Windows. إنه يعمل بشكل جيد في Firefox ، ويعمل بشكل جيد في إصدارات Chrome السابقة. package.json:

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

والنتيجة هي نفسها مع 2.4.0 / 2.4.1

تم حلها بهذا الاختراق:

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

awestroke انتهى بي الأمر

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

لقد أنشأت PR لإصلاح هذه المشكلة والمشكلات المحتملة من خلال تبسيط الحالة لتشغيل endDrag
https://github.com/react-dnd/react-dnd/pull/801

لدي نفس المشكلة على الرغم من عدم وجودها في كل مرة ، فقط في بعض الحالات ، على سبيل المثال هذه الحالة هي:
لديّ عنصر واجهة يمكن إسقاطه داخل منطقة الإسقاط ، وستعرض منطقة الإسقاط هذه بعض لغة html عند إسقاط الأداة. إذا اخترت إفلات أداة الفيديو ، فستظهر iframe وستتكسر ولا يمكنني سحب أي أدوات أخرى بعد ذلك (لم يتم تشغيل الحدث dragend ). ولكن إذا استبدلت هذا iframe بنص أو صورة ، فإنه يعمل بشكل جيد ، وكان يعمل قبل Chrome 59 ، ويعمل في أي متصفح آخر ، لا يمكنني معرفة ذلك ، هي المشكلة في كروم أو رد فعل dnd؟

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

hunterbmt شكرا لإزالة الغموض 😄
ولكن كيف يمكنني استخدام طلب السحب الخاص بك من خلال npm / الغزل؟ لأنه يبدو أنه لم يتم دمجه ، أم أنني مخطئ؟ 😕

rogyvoje أعتقد أنه يمكنك ، بدلاً من الإصدار فقط أشر إلى الفرع الخاص بي مباشرة. تم دمج العلاقات العامة ولكن لم يتم إصدار رد فعل-dnd بعد إصدار جديد لذلك لا يمكنك الحصول عليه مباشرة من رد فعل-dnd npm / الغزل.

تضمين التغريدة
حاولت القيام بذلك على النحو التالي:

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

لكن شاشة تسجيل الدخول تنبثق دائمًا

يمكن لأي شخص في هذا الموضوع توفير حالة استنساخه من المشكلة؟ أستخدم react-dnd كثيرًا ولكن لا يمكنني تحديد أي مشكلة في Chrome 59 ، لذلك أنا مهتم جدًا بالحصول على حالة قابلة للتكرار حيث يفشل react-dnd لأن Chrome 59 لا يطلق drag/drop أحداث

أعتقد أنه إذا كانت هناك مشكلة ، فيجب أن تكون قابلة للتكرار بسهولة شديدة من قبل بعضكم الذين رأوا المشكلة في المقام الأول ، لذا يرجى محاولة تخصيص الوقت لنشر حالة قابلة للتكرار (يمكن أن تكون عبارة عن مستودع جيثب أو رمز منشور هنا https://codesandbox.io/) وحاول تقديم أي معلومات مفيدة (مثل نظام التشغيل ، إصدار رد الفعل ، إلخ). شكرا!

bjrmatos هنا ، لقد صنعت واحدة ، هذه هي حالتي وآمل أن تساعد!

https://github.com/rogyvoje/react-dnd-chrome-59

اختبرته على الكروم 59 ، وفي التحديث الحالي:
الإصدار 60.0.3112.78 (الإصدار الرسمي) (64 بت)

بالنسبة لمعلومات Windows:
اسم نظام التشغيل: Microsoft Windows 10 Pro
إصدار نظام التشغيل: 10.0.14393 N / A Build 14393

تم اختباره على Chrome: الإصدار 55.0.2883.87 (64 بت) (على Linux / Mint 18) ويعمل بشكل مثالي ...

تضمين التغريدة سألقي نظرة لاحقًا ، دعنا نرى ما إذا كان بإمكاني رؤية المشكلة في windows 7 VM ، وإلا سأحاول جهاز VM آخر مع windows 10. thnks!

مرحبًا rogyvoje ، لقد جربت المستودع الخاص بك مباشرةً في أحدث إصدار من Chrome كما قلت إن لديك نفس المشكلة هناك (الإصدار 60.0.3112.78 (الإصدار الرسمي) (64 بت) - Windows 10 PRO) ولكني لا أرى أي خطأ.

هذه هي النتيجة المتوقعة أليس كذلك؟

هل هناك أي خطوات أخرى / أخرى لإعادة إظهار مشكلتك؟

لقد قمت بتثبيت التبعيات مع [email protected] (بدلاً من استخدام yarn ) وللتسجيل فقط ، إليك الإصدارات الدقيقة من التبعيات المثبتة:

ملاحظة: أنا أستخدم windows 10 PRO VM (لأن نظام التشغيل الرئيسي الخاص بي هو OSX El Capitan ، حيث لا توجد مشكلة مع الكروم)

ونفس النتيجة مع تعطيل جميع ملحقات chrome الخاصة بي:

rogyvoje لقد قرأت للتو تعليقاتك السابقة والآن يمكنني إعادة إنتاج المشكلة ، كما تقول ، يعمل السحب الأول ، ولكن إذا حاول شخص ما السحب للمرة الثانية ، يظهر الخطأ Cannot call hover after drop .

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

يبدو أنه تم تأكيد الخطأ: https://bugs.chromium.org/p/chromium/issues/detail؟id=737691&q=dragend&colspec=ID٪20Pri٪20M٪20Stars٪20ReleaseBlock٪20Component٪20Status٪20Owner٪20Summary٪20OS ٪ 20 معدل

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

بالنسبة للسجل ، يمكنني إعادة إنتاج الخطأ بنفس المثال أيضًا في Chrome (60) Mac OS (El Capitan) (لست متأكدًا مما إذا كان موجودًا أيضًا في Chrome 59 لنظام التشغيل Mac) ، لذلك فإنه يفشل في كل مكان عند استخدام Chrome (> = 59) وعند استخدام إطارات iframe 😂

bjrmatos رائع ، سعيد لأنك نجحت في إعادة إنتاجه 😄
لست متأكدًا مما سيحدث بعد ذلك ، فهل يجب أن ننتظر Chrome 61؟ 😂

لست متأكدًا مما سيحدث بعد ذلك ، فهل يجب أن ننتظر Chrome 61؟

ربما ، على أي حال ، أحاول العثور على تصحيح لطيف يجعل رد الفعل يعمل في Chrome 59 ، 60 ، لذلك سأقوم هنا بنشر المزيد من التحديثات لاحقًا 👍

أعتقد أن هذا يحل المشكلة. https://github.com/react-dnd/react-dnd/pull/820
تم دمجها بالفعل ، ولكن لم يتم إصدارها.

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

@ ms88privat # 820 يحل الاستثناء ، ولكن ليس المشكلة الأولية التي على Chrome (أنا أستخدم 67) source.endDrag لا يتم الاتصال بها مطلقًا عند عرض إطار iframe.

قبل الإصدار 3.0 ، استخدمنا الحل البديل الذي يوفره @ 0rvar ، ولكن مع أساليب كتابة TS الأكثر صرامة ، لا يمكن تجاوز طرق المثيل أو طرق الفئة الخاصة.

يمكنك إعادة إنتاجه عن طريق إضافة endDrag إلى Video.js في مخزن اختبار @ rogyvoje`s

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

في المرة الأولى التي تسحبها ، لا يتم استدعاء endDrag لمتصفح Chrome.

يتجمد أيضًا عند تضمين إطار iframe في الصفحة داخل الكروم (59 حتى التيار) يعمل إصلاح @ 0rvar في هذه الحالة أيضًا

تم إصلاح هذا الآن في الكروم 72 ، والذي تم إصداره بالأمس.

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