React-dnd: استخدمه بالداخل و / أو مع إطار iframe.

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

https://github.com/gaearon/react-dnd/blob/master/src/backends/HTML5.js#L130 -L139

لقد قمت بتصحيح واجهة HTML5 الخلفية في مشروعي الأخير لجعلها تعمل ( setup و teardown قبول كائن نافذة بديل win ):

https://gist.github.com/rasmusfl0e/39db428399bd196ef706

يتطلب أيضًا الكشف عن نسخة الواجهة الخلفية بطريقة ما (المزيد من عمليات تصحيح القرود في DragDropContext.js ...) لتنفيذ setup و teardown عند الحاجة (في إعداد الإطارات الخاصة بك) .

ولكن بمجرد أن يتم ذلك - فإنه يعمل مثل السحر: د

أوه ، واو اكتشاف لطيف ، له معنى كبير. سيتم تجربتها في وقت لاحق اليوم ، هل يمكن تجنب التغيير في DragDropContext.js؟ بهذه الطريقة يمكننا فقط تكوين خلفية جديدة كما ذكرنا في المستندات.

يسعدني النظر في واجهة برمجة تطبيقات محددة واقتراح تنفيذ يعالج هذا الأمر.
لسوء الحظ ، يصعب فهم ما تم تغييره ولماذا بالضبط من الجوهر.

في الوقت الحالي ، لنفترض أننا لا ندعم إطارات iframe.

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

nadimtuhin كنت أعمل على منشئ صفحات ذات إطار متقاطع بنفسي عندما

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

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

gaearon بعض المؤشرات / القرائن مثل المكان الذي يجب أن ننظر فيه سيكون رائعًا ، وأتطلع إلى تقديم / محاولة أول

mattconde لا أنا لا

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

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

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

لدي نفس المشكلة مؤخرا سبب فشلها هو أن HTML5Backend يعيّن أدوات استماع للأحداث في النافذة ، ولكن إذا كنت تريد استخدامها داخل iframe ، فيجب عليك بدلاً من ذلك ضبطها على window.frames [0] على سبيل المثال.

gaearon ما رأيك في خيار تمرير السياق لوظيفة الإعداد / التفكيك في HTML5Backend.js؟

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

لقد فتحت مشكلة https://github.com/gaearon/react-dnd/issues/435 واكتشفت أنها كانت بسبب iframe. سأحاول "تعديله" ولكن إذا كان هناك أي حل ، فسيسعدني معرفة ذلك! :)

أحاول إنشاء علاقات عامة لجعلها تعمل مع إطارات iframe. قيد التقدم حاليًا ، ولا يعمل بعد ، وأواجه مشكلات في معرفة كيفية استدعاء setup و teardown ، الاحترام في componentDidMount و componentWillUnmount طرق

https://github.com/gaearon/react-dnd-html5-backend/pull/27

Vadorequest يبدو أن كلانا يهدف إلى منتج نهائي مماثل. لم ينتهي بي الأمر بجعله يعمل مع react-dnd من نافذة الأب إلى الطفل. كان العمل الذي استقرت عليه هو وجود تطبيق المحرر (الوالدين) الخاص بي والحصول على تطبيق معاينة (طفل). لم يتم عرض تطبيق المعاينة حتى يتمكن من الاتصال بمتجر redux للمحررين.

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

بفضل دعم الأنواع الأصلية من react-dnd ، يمكنني إعداد عمليات سحب النص في نافذة المحرر لتمرير المعلومات المطلوبة لكل قالب ليتم عرضه. مقتطف الرمز الخاص بي ...

    componentDidMount() {
        this.refs.template.addEventListener('dragstart', this.handleDragStart, false);
    },
    componentWillUnmount() {
        this.refs.template.removeEventListener('dragstart', this.handleDragStart, false);
    },
    handleDragStart(e) {
        const { template } = this.props;
        e.dataTransfer.setData('text/plain', JSON.stringify({
            type: template.type,
            name: template.name,
        }));
        return e;
    },

ثم يمكنني التقاط سلسلة JSON على الطرف الآخر بـ react-dnd ، تعمل بشكل جيد.

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

mattconde أنا أعمل على فرعين منفصلين ، إصلاح قبيح وإصلاح حقيقي لهذا. الإصلاح القبيح يغير ببساطة تلك الأسطر في ملف HTML5Backend.js . يمكن الاطلاع على التغييرات هنا: https://github.com/Gutenberg-Technology/react-dnd-html5-backend/commit/8b3d6a44b2cdbfe8d5bac025fc263715968d8b6c

_ (إنها في الأساس تضيف معلمة target إلى setup و teardown ، والتي تحتوي على iframe كقيمة افتراضية وتعود إلى استخدام window . الإصلاح قبيح للغاية لدرجة أنه سيفشل في الواقع إذا لم يتم العثور على إطار iframe ، لكنه سيفعل في الوقت الحالي.) _

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

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

مرحبًا يا رفاق ، لقد واجهت هذه المشكلة بنفسي ، لا يمكنني معرفة كيفية توصيل النافذة بـ iframe. على سبيل المثال ، أرغب في الحصول على بعض DragSource على النافذة وأريد إنشاء بعض DropTarget على iframe ، حتى لو قمت بتعديل HTML5Backend ، لا يمكنني جعله يعمل بهذا الشكل ...

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

gaearon تتيح العلاقات العامة هنا ☝️ رد فعل dnd لدعم إطارات iframes. إذا كان لديك أي مخاوف أو كنت بحاجة إلى تغيير أي شيء ، فأعلمني بذلك.

kesne هل أنت

مرحباdarthtrevino
هل تسمح تغييراتك بسحب عنصر من الصفحة إلى الإطار؟
يمكنني السحب والإسقاط داخل الإطار وخارجه.

مرحبًا crysislinux ، أتطلع إلى نقل هذه المكتبة إلى Angular 2 وأود أن أرى ما

هل هناك طريقة لإفلات العناصر الموجودة خارج iframe داخل iframe على سبيل المثال:

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <Frame>
            <div>
                <Dustbin />
            </div>
        </Frame>
    </div>
</DragDropContextProvider>

بعد الكثير من المحاولات تمكنت من إسقاط عناصر داخل إطار iframe مثل هذا:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FrameComponent from 'react-frame-component';

class DragDropAwareIFrame extends Component {
  static propTypes = {
    innerRef: PropTypes.func,
  };

  static contextTypes = {
    dragDropManager: PropTypes.object.isRequired,
  }

  constructor(props, context) {
    super(props, context);

    this.manager = this.context.dragDropManager;
  }

  componentDidMount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().addEventListeners(iframe.contentWindow);
  }

  componentWillUnmount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().removeEventListeners(iframe.contentWindow);
  }

  handleRef = (el) => {
    this.iframe = el;
    if (this.props.innerRef) this.props.innerRef(el);
  }

  render() {
    const { innerRef, ...props } = this.props;
    return <FrameComponent {...props} ref={this.handleRef} />;
  }
}

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <DragDropAwareIFrame>
            <div>
                <Dustbin />
            </div>
        </DragDropAwareIFrame>
    </div>
</DragDropContextProvider>

هل يبدو أن هذه هي الطريقة الصحيحة للقيام بذلك؟

ethanve صادفت للتو هذا الموضوع من مشكلة خداع - لقد بنيت ما وصفته. https://cormacrelf.github.io/angular-skyhook/

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

أريد أن أشير إلى أنه يعمل مع Touch backend ولكن ليس مع HTML5 backend.