React-dnd: معاينة خاطئة في Chrome

تم إنشاؤها على ١٩ يوليو ٢٠١٧ · 20تعليقات · مصدر: react-dnd/react-dnd

1) لقطة الشاشة أدناه تظهر مشكلة غريبة تتعلق بمعاينة السحب. في حالتي ، تكون عقدة صف الجدول القابل للسحب هي المصدر والهدف. لبعض الأسباب ، لا تحتوي معاينة السحب على لقطة شاشة لعقدة المصدر فحسب ، بل تحتوي أيضًا على جميع الصفوف أدناه! في نفس الوقت ، يتم استدعاء عملية السحب لمصدر واحد فقط ويعمل المبادلة في معالج الإسقاط بشكل جيد.

2) هناك أيضًا خطأ غريب مرتبط بتصحيح الأخطاء: عندما أضع نقطة توقف في طريقة العرض لعقدة السحب ومتابعة تشغيل التطبيق ، أحصل على خطأ أثناء السحب

خطأ غير معلوم: لا يمكن استدعاء التحويم بعد الإفلات.
في ثابت (browser.js؟ 72b5: 40)
في DragDropManager.hover (dragDrop.js؟ 3115: 111)
في Object.eval [as hover] (DragDropManager.js؟ b07f: 92)
في HTML5Backend.handleTopDragEnter (HTML5Backend.js؟ 5f50: 495)

لكن مشكلة السحب الموصوفة أعلاه تختفي وتعمل ميزة السحب والإفلات بشكل جيد (مرة واحدة). ثم في مكان ما بعد حدث الإفلات حدث خطأ "لا يمكن استدعاء startDrag أثناء السحب" وسحب التوقف للعمل على الإطلاق.

خطأ غير معلوم: لا يمكن استدعاء startDrag أثناء السحب.
في ثابت (browser.js؟ 72b5: 40)
في DragDropManager.beginDrag (dragDrop.js؟ 3115: 50)
في Object.eval [as beginDrag] (DragDropManager.js؟ b07f: 92)
في HTML5Backend.handleTopDragStart (HTML5Backend.js؟ 5f50: 361)

يظهر الخطأ فقط في Chrome (57 و 59). أيه أفكار؟

مصدر

tTwisTt

👍8

التعليق الأكثر فائدة

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

RahulRameshNarayan في ٢٧ نوفمبر ٢٠١٨

👍51 ❤11 🎉10 🚀6 👀1

ال 20 كومينتر

tTwisTt أواجه هذه المشكلة بالضبط ، هل اكتشفت الإصلاح؟

kaiomagalhaes في ٢ أكتوبر ٢٠١٧

kaiomagalhaes في حالتي ، كنت أتلقى هذه المشكلة نظرًا لأن أحد العناصر الفرعية في الصف (محتوى الخلية) كان في الواقع ارتفاعًا أكبر من ارتفاع الصف ، ولكنه كان مخفيًا من خلال الرؤية: مخفي في css. لذلك ، كان لسحب المصدر عرض الصفوف وارتفاع عنصر التحكم المخفي. أتمنى أن تجد هذا مفيدًا.

tTwisTt في ٤ أكتوبر ٢٠١٧

👍1

tTwisTt يمكنني أن أؤكد ذلك ، نفس الشيء يحدث مع الفائض: مخفي. هل هناك طريقة لسحب عناصر مثل هذه دون المعاينة الخاطئة؟

matthiaskrieft في ٤ أكتوبر ٢٠١٧

👍12

تم إغلاق هذه المشكلة ، ولكن يبدو أنها لا تزال تمثل مشكلة ، ألا يجب إعادة فتحها؟

canastro في ٢ أكتوبر ٢٠١٨

لدي أيضًا نفس المشكلة - عندما أبدأ في سحب المعاينة كبيرة جدًا ولا تحترم الأجزاء التي يجب إخفاؤها بواسطة تجاوز السعة.
هنا يمكنك أن ترى كيف أسحب عنصرًا ولكن "الحد" إلى اليسار بجواره يعد جزءًا من المعاينة أيضًا.

تحرير: تمكنت من إصلاحه من خلال عدم استخدام صورة ذات موضع نسبي في العنصر ولكن بدلاً من ذلك باستخدام div مع صورة خلفية بدلاً من ذلك.
لذلك يبدو أن عنصر img الداخلي الذي يصل إلى الأصل هو سبب المشكلة.

olee في ٥ أكتوبر ٢٠١٨

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

willbuckingham في ٣٠ أكتوبر ٢٠١٨

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

RahulRameshNarayan في ٢٧ نوفمبر ٢٠١٨

👍51 ❤11 🎉10 🚀6 👀1

RahulRameshNarayan هذا أيضا عمل بالنسبة لي. اشكرك!
اي فكرة لماذا هذا يحل المشكلة ؟؟

jsyvino في ٢٧ نوفمبر ٢٠١٨

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

هيا نلعب مع CSS المعجل بالأجهزة-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

عرض مسرّع في Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

تبسيط الطلاء المعقد وتقليل مساحات الطلاء
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

RahulRameshNarayan في ٤ ديسمبر ٢٠١٨

👍2

تعمل transform3d (0،0،0) على إصلاح مشكلة لقطة شاشة الصفحة بأكملها ولكن لها موضع خاطئ للعنصر.
DragIssue

هذه المشكلة فقط في المتصفحات القائمة على الكروم.
هل واجه أي شخص مشكلات مماثلة وكيف تم إصلاحها؟

makr11 في ١٢ يونيو ٢٠١٩

👍10

أتلقى هذه المشكلة أيضًا على Chrome 75 عند استخدام Material-UI ListItem كعقدة قابلة للسحب. أعتقد أن عنصر Ripple الذي يحتويه overflow: hidden هو سبب عدم تطابق الحجم.

كما يذكر @ makr11 ، فإن إصلاح

هل يفهم أي شخص ما هي المشكلة الأساسية هنا ، على ما يبدو على مستوى إنشاء معاينة السحب على DOM أو Native / HTML5؟ أود معالجة إصلاح هذا بشكل صحيح.

mismith في ١٢ يونيو ٢٠١٩

👍2

نفس الشيء هنا ، أتلقى هذه المشكلة على Chrome 75 ، ويعمل على Firefox بشكل جيد ... يجب إعادة فتح هذا!

faraonkicu في ٢٦ يونيو ٢٠١٩

👍1

حالة الاستخدام الخاصة بي محددة ولكن ربما ستساعد شخصًا ما ، فأنا أستخدم لوحة معلومات السرعة التي تستخدم تفاعل dnd ، ويتم عرض عناصر واجهة المستخدم الداخلية (وهي مكون قابل للسحب) على شكل مخطط رد فعل. حدثت المشكلة عندما تم عرض مخطط js داخل عنصر واجهة المستخدم. لقد حددت للتو أنه عندما يكون عنصر واجهة المستخدم قابلاً للسحب ، يتم عرض div الأساسي داخل عنصر واجهة المستخدم وليس مكون مخطط js.

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

makr11 في ٢٨ يونيو ٢٠١٩

لا تزال المشكلة تظهر (Chrome 75.0.3770.100) ولكنها تحل عن طريق إضافة التحويل: translate3d (0) لتحتوي على عنصر. شكراRahulRameshNarayan

artem-tkachenko في ١٠ يوليو ٢٠١٩

👍1

أنا أيضا أواجه نفس المشكلة. حاولت حلها بإضافة transform: translate3d(0, 0, 0) ، لكن لدي نفس المشكلة مثل @ makr11 هنا: https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272