<p>يتداخل رد فعل- dnd مع تحميلات السحب / الإفلات</p>

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

لديّ مكون منطقة إسقاط مخصص حيث يمكن للمستخدم سحب / إسقاط الملفات عليه لتحميلها. لسوء الحظ ، فإن رد فعل dnd يتدخل فيه. أحيانًا يعمل سحب الملفات إلى منطقة الإسقاط ، وفي أحيان أخرى ، لا يحدث شيء ( onDrop لم يتم تشغيله) أي اقتراحات؟

bug

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

هذه هي المشكلة: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

بناءً على تعليق الكود ، "لا تظهر مؤشرًا لطيفًا" ، يبدو أنه يعامل e.dataTransfer.dropEffect أنه خاصية عرض فقط. ولكن ، يبدو أن تعيين dropEffect على none يمنع إفلات الملفات معًا. تجدر الإشارة إلى أن تعيينه على move أو copy أو link يعمل بشكل جيد. هذا في Chrome 55.0.2.

يمكننا في الواقع تكرار هذا خارج التفاعل معًا. لقد صنعت كمانًا يعزل المشكلة: https://jsfiddle.net/ypr6os00/8/

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

تحرير: هذه هي نفس المشكلة مثل https://github.com/gaearon/react-dnd-html5-backend/issues/25

ال 26 كومينتر

كان لي مشكلة المعاكس. لكي أجعل الواجهة الخلفية لـ HTML5 تعمل مع منطقة الإسقاط ، كان علي أن أفعل:

beginDrag(props) {
  Dropzone.instances[0].disable() 

و

endDrag(props, monitor, component) {
  Dropzone.instances[0].enable()

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

واجهت أيضًا مشكلة حيث يحتوي العنصر القابل للسحب على <input> ، وإذا قام المستخدم بتحديد / سحب داخله ، فإنه يسحب العنصر. يمكنني على الأرجح إرجاع false من canDrag إذا كان الإدخال مركّزًا ، وهذا من شأنه أن يفي بالغرض.

لست متأكدًا من كيفية معالجة التداخل مع تحميل السحب / الإفلات بتنسيق HTML. لقد قمت بالفعل بتمكينه على التخطيط بالكامل. gaearon ، الأفكار؟

ffxsam هل ما زالت هذه مشكلة بالنسبة لك؟

لا أدري، لا أعرف. اضطررت إلى إلغاء تثبيته بسبب هذه المشكلة ، لذلك لا يمكنني إخبارك ما إذا كانت لا تزال تمثل مشكلة - آسف! يمكنك إغلاق هذه القضية إذا كنت تريد.

مرحبًا ، لقد واجهت نفس المشكلة للتو ، كنت على وشك فتح مشكلة ولكني أرى أنها مفتوحة بالفعل.
لذا فالشيء هو أنه حيثما تقوم بإنشاء مثيل لـ ReactDnD ، يتوقف حدث onDrop الأصلي عن العمل.
لدي نفس حالة الاستخدام ، الجسم كله عبارة عن "منطقة إسقاط" تستمع دائمًا لسحب الملف ، أنا فقط أستخدم الأحداث الأصلية لهذا المكون نظرًا لأنها وظيفة بسيطة جدًا وتخرج من الصندوق. ولكن في المشاهدات التي أعمل بها ReactDnD ، لا يتم تشغيل حدث الإسقاط ، وهو أمر مضحك لأنه لا يقوم بالكتابة فوق حدث onDragEnter أو onDragStart.
أي فكرةkesnegaearon؟ لا أريد حقًا إلغاء تثبيت ReactDnD ، فهو أفضل تبعية للسحب والإفلات لـ React حتى الآن.

kesnegaearon أواجه نفس المشكلة مثل xavibonell . أنا أستخدم React DND مع Wordpress ويستخدم برنامج تحميل وسائط Wordpress أحداث الإسقاط الأصلية لتحميل الملفات. لا يتم تشغيل رد الاتصال onDrop ، فقط عند استخدام ReactDND في التطبيق. تؤدي إزالة أهداف إسقاط Reactdnd إلى حل المشكلة. لقد أمضيت عدة أشهر في المشروع وكان رد الفعل جزءًا أساسيًا منه وقد تم استخدامه على نطاق واسع. بالتأكيد لا يمكنني الانتقال إلى مكتبة أخرى في هذا المنعطف. من هذا الموضوع بالإضافة إلى التقارير المماثلة في Stack Overflow ، أرى أن هذه المشكلة كانت موجودة منذ فترة طويلة. أي حل لهذا سيكون موضع تقدير كبير.

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

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

kesne شكرًا جزيلاً على ردك ومن الجيد معرفة أنك ستنظر في هذه المشكلة. سأقوم بالتأكيد بإنشاء مثال حي لك ونشر رابط هنا في أقرب وقت ممكن.
في غضون ذلك ، يبدو أنني اكتشفت اختراقًا مؤقتًا ، ولم أختبره جيدًا بعد ، ولكن يبدو أنه يقوم بالخدعة في الوقت الحالي. لقد لاحظت وجود وظائف setup () و teardown () في HTML5Backend ، والتي كانت تربط جميع مستمعي الأحداث بعنصر النافذة. في حالتي ، يكون برنامج تحميل ملف WordPress عبارة عن صندوق مشروط يشغل الشاشة بأكملها ، وبالتالي لا يمكن سحب أو إسقاط عناصر ReactDND عند فتح النموذج. لذلك أثناء الحدث المفتوح للنافذة المشروطة ، أستدعي وظيفة teardown () في مثيل الواجهة الخلفية (متوفرة عبر DragDropManager) وأثناء إغلاق الوسائط ، أستدعي وظيفة setup (). يبدو أن هذا يعمل بشكل جيد ولكن هل يمكنك السماح لي بمعرفة ما إذا كان استدعاء وظائف teardown و setup مرة أخرى يمكن أن يتسبب في أي مشكلات أخرى مع ReactDND على المكونات الحالية أو التي تم تقديمها حديثًا؟

هذه هي المشكلة: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

بناءً على تعليق الكود ، "لا تظهر مؤشرًا لطيفًا" ، يبدو أنه يعامل e.dataTransfer.dropEffect أنه خاصية عرض فقط. ولكن ، يبدو أن تعيين dropEffect على none يمنع إفلات الملفات معًا. تجدر الإشارة إلى أن تعيينه على move أو copy أو link يعمل بشكل جيد. هذا في Chrome 55.0.2.

يمكننا في الواقع تكرار هذا خارج التفاعل معًا. لقد صنعت كمانًا يعزل المشكلة: https://jsfiddle.net/ypr6os00/8/

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

تحرير: هذه هي نفس المشكلة مثل https://github.com/gaearon/react-dnd-html5-backend/issues/25

يمكنني تأكيد ذلك في حالتي ، ما عليك سوى التعليق على e.dataTransfer.dropEffect = 'none'; (على https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452 ) أصلح مشكلتي الخاصة بالتدخل في رد الفعل مع أحداث Dropzone الخاصة بي.

كمرجع ، لدي إعداد مشابه لما يلي:

<DragDropContextProvider backend={HTML5Backend}>
  <Dropzone>
    <DropTargetComponent />
    <OtherComponent>
      <DragSourceComponent1 />
      <DragSourceComponent2 />
      <DragSourceComponentN />
    </OtherComponent>
  </Dropzone>
</DragDropContextProvider>

فيها DropTargetComponent = DropTarget(TYPE, target, collect)(Component) و DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

هل هناك أي آثار جانبية معروفة لهذا الترقيع أو الإصلاح الأفضل؟ خلاف ذلك ، يمكن أن يتم دمج هذا إلى الأبد؟

شكرًا على كل العمل الرائع ، وشكرًا @ kn0ll على اكتشاف حل بديل.

[تعديل]
لقد صنعت Github fork وحزمة npm حتى يتم حل هذه المشكلة في المشروع الرئيسي ، إذا كان ذلك

شكرا على الحل

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

أواجه نفس المشكلة. نظرًا لفكرة المناطق المنسدلة المتداخلة ، انتهى بي المطاف بلف مكوِّن تحميل أيًا كان داخل div وإضافة خاصية onDragOver إلى div ، والذي يوقف النشر فقط. يبدو أن هذا جعله يعمل في حالتي ، إليك المثال (كنت أستخدم Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

ومع ذلك ، لا تحب فكرة أن رد الفعل يمكن أن يتداخل كثيرًا في وظيفة d & d في المكونات الأخرى. يبدو الأمر وكأنه حادث مؤسف كبير ، حيث يمكن لبعض المكونات التي تستخدم رد فعل dnd لعقد d & d DOM تعطيل وظيفة d & d لإسقاط ملف في مكون آخر. +1 لإصلاح ذلك في المكتبة

ربما يمكن أن يكون الحل السريع ، أن تأثير dropEffect يمكن تحديده بطريقة ما من خلال بعض سلسلة الدعامة؟

انتهى بي الأمر باستخدام silvainSayduck fork للواجهة الخلفية HTML5. يعمل بالنسبة لي. من المؤسف أن هذا الخطأ لم يتم إصلاحه في رد الفعل مباشرة ، ولكن على الأقل هناك حل بديل

هل هناك فرصة لإصلاح هذا قريبًا؟ silvainSayduck هل يمكنك فتح طلب سحب

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

1239

darthtrevino هل تمانع في المشاركة في هذا المشروع؟

بإلقاء نظرة على العلاقات العامة ، يبدو من المعقول أن أحتاج فقط للتحقق من أنه لا يفسد مع الأمثلة

اندمجت في # 1240

شكرا جزيلاdarthtrevino! متى سيتم إصدار هذا في إصدار npm؟

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

darthtrevino هل هو متوفر في الإصدار الحالي؟ متى سيكون متاحًا؟

أعتقد أنه في الإصدار الحالي ، نعم. اسمحوا لي أن أعرف إذا واجهت مشاكل

darthtrevino شكرا لك ، إنه متاح.

أواجه نفس المشكلة. نظرًا لفكرة المناطق المنسدلة المتداخلة ، انتهى بي المطاف بلف مكوِّن تحميل أيًا كان داخل div وإضافة خاصية onDragOver إلى div ، والذي يوقف النشر فقط. يبدو أن هذا جعله يعمل في حالتي ، إليك المثال (كنت أستخدم Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

ومع ذلك ، لا تحب فكرة أن رد الفعل يمكن أن يتداخل كثيرًا في وظيفة d & d في المكونات الأخرى. يبدو الأمر وكأنه حادث مؤسف كبير ، حيث يمكن لبعض المكونات التي تستخدم رد فعل dnd لعقد d & d DOM تعطيل وظيفة d & d لإسقاط ملف في مكون آخر. +1 لإصلاح ذلك في المكتبة

ربما يمكن أن يكون الحل السريع ، أن تأثير dropEffect يمكن تحديده بطريقة ما من خلال بعض سلسلة الدعامة؟

add event.stopPropagation() on handleDragOver [Dropzone] يعمل على إصلاح المشكلة في حالتي. شكراvileppanen

هذا الموضوع أنقذ حياتي

بالنسبة لأولئك الذين يواجهون هذه المشكلة حيث يكون <Dropzone /> داخل مكون react-dnd ، يعمل الحل نفسه - التفاف <Dropzone /> في <div onDragOver={e=> e.stopPropagation() /> بـ onDragOver تستخدم لوقف التكاثر.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات