React-dnd: تم وضع DragPreview بشكل خاطئ عند استخدام translate3d على العقد الفرعية

تم إنشاؤها على ١٩ أغسطس ٢٠١٥ · 5تعليقات · مصدر: react-dnd/react-dnd

مهلا!

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

لقد جمعت مثالًا بسيطًا للغاية ، وضح لك المشكلة. (لجعله يعمل ، تحتاج إلى وضع ReactDnD.min.js في مجلد "./scripts/react-dnd-1.1.4/dist" ، لأنني لم أجد أي CDN يستضيف ReactDnD).

شكرا للمساعدة!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DragPreview with wrong position example</title>

        <script src="http://fb.me/react-with-addons-0.13.3.js"></script>
        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
        <script src="scripts/react-dnd-1.1.4/dist/ReactDnD.min.js"></script>

        <style>
            .ReactDnDElement {
                background: red;
                overflow: hidden;
                width: 200px;
                height: 100px;
            }

            .ReactDnDElement .wrapper {
                display: flex;
                align-items: center;
                width: 600px;
                height: 100%;
                transform: translate3d(-275px, 0, 0);
            }

            .ReactDnDElement .wrapper div {
                width: 150px;
                height: 50%;
            }

            .ReactDnDElement .wrapper div.green { background: green; }
            .ReactDnDElement .wrapper div.blue { background: blue; }
            .ReactDnDElement .wrapper div.yellow { background: yellow; }
            .ReactDnDElement .wrapper div.magenta { background: magenta; }
        </style>
    </head>

    <body>
        <script type="text/jsx">
            /* ReactDnDApp */

            var ReactDnDApp = React.createClass({
                render: function() {
                    return (
                        <ReactDnDElement></ReactDnDElement>
                    );
                }
            });

            ReactDnDApp = ReactDnD.DragDropContext(ReactDnD.HTML5)(ReactDnDApp)


            /* ReactDnDElement */

            var ReactDnDElement = React.createClass({
                render: function() {
                    return this.props.connectDragSource(
                        this.props.connectDragPreview(
                            <div className="ReactDnDElement">
                                <div className="wrapper">
                                    <div className="green"></div>
                                    <div className="blue"></div>
                                    <div className="yellow"></div>
                                    <div className="magenta"></div>
                                </div>
                            </div>
                        )
                    );
                }
            });

            ReactDnDElement = ReactDnD.DragSource("dndElement", {
                beginDrag: function(props) {
                    return {};
                }
            }, function(connect, monitor) {
                return {
                    connectDragSource: connect.dragSource(),
                    connectDragPreview: connect.dragPreview()
                };
            })(ReactDnDElement);


            /* RUN IT! */

            React.render(React.createElement(ReactDnDApp), document.body);
        </script>
    </body>
</html>

bug wontfix

مصدر

delijah

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

حسنًا ، آمل أن يقوم المتصفح بإصلاح هذه المشكلة قريبًا ..

غير محتمل. تم توحيد سحب وإفلات HTML5 أعلى سلوك IE5 ، وقد تم كسره وغير متسق على مر العصور. مع ازدياد تعقيد الويب ، أظن أنه سيزداد سوءًا وليس أفضل. يعد التعامل مع الماوس واللمس المخصص حلاً أفضل ، وأنا أتطلع إلى نشر هذه الخلفيات الخلفية لـ React DnD.

gaearon في ٢٤ سبتمبر ٢٠١٥

👍2

ال 5 كومينتر

يبدو أن هناك مشكلة في وظيفة السحب والإفلات html5 الأصلية أيضًا. إذا جربت الشيء نفسه مع طرق السحب والإفلات html5 الأصلية ، فستعمل بشكل صحيح مع Firefox و Safari ، ولكن ليس مع Chrome و Opera.

مع رد الفعل-dnd ، لا توجد هذه المشكلة في رحلات السفاري ، ولكنها موجودة في الكروم والأوبرا وفايرفوكس.

لقد فتحت مشكلة لـ chromium: https://code.google.com/p/chromium/issues/detail؟

delijah في ٢٦ أغسطس ٢٠١٥

أي نوايا لإصلاح هذا الخطأ؟

delijah في ٨ سبتمبر ٢٠١٥

الاشياء السيئة. لقد قضيت ساعتين للتو في هذا وليس لدي أي فكرة عن كيفية إنجاحه.

يبدو هذا كواحد من تلك التناقضات الرهيبة في المتصفح. يتم تفسير نفس قيم x و y التي تم تمريرها إلى dataTransfer.setDragImage بواسطة المتصفحات بشكل مختلف عندما يتم وضع أي عنصر فرعي للعنصر الذي تفاعلت معه بإزاحة سلبية إلى العنصر الأصل. لاحظ كيف أن تغيير التحويل إلى إيجابي يجعله يعمل بطريقة سحرية.

من المحتمل أن يكون سبب عدم ظهور هذه المشكلة في بعض أمثلة السحب والإفلات بتنسيق HTML5 الفانيليا في Firefox لأنها لا تحدد x و y ، وتتحول القيم الافتراضية إلى "العمل فقط ". ومع ذلك ، نحن بحاجة إلى تحديدها للعنصر المسحوب الذي يظهر في المكان الصحيح في معظم الحالات.

أشك في وجود أي حل ممكن هنا. عندما يكون أي من العناصر الفرعية المتداخلة بشدة لعقدة مصدر السحب خارج حدودها إلى اليسار أو الحافة العلوية ، يتوقف setDragImage(node, x, y) عن العمل بشكل صحيح في بعض المستعرضات. مرة أخرى ، حتى لو حاولنا إصلاحه لبعض المتصفحات ، فإننا بالتأكيد سنكسر هذا في المتصفحات الأخرى ، لذلك لا أعتقد أنه يمكننا إصلاح ذلك بشكل موثوق.

أنا أغلق ، لكن لا تتردد في البحث عن حلول! في الوقت الحالي ، أقترح تجنب التحويلات السلبية داخل مصادر السحب. لاحظ أنه يمكنك نقل connectDragSource _داخل_ الغلاف المحول:

.ReactDnDElement {
    background: red;
    overflow: hidden;
    width: 200px;
    height: 100px;
}

.ReactDnDElement .transform {
    transform: translate3d(-275px, 0, 0);
    width: 100%;
    height: 100%;
}

.ReactDnDElement .wrapper {
    display: flex;
    align-items: center;
    width: 600px;
    height: 100%;
}

.ReactDnDElement .wrapper div {
    width: 150px;
    height: 50%;
}

.ReactDnDElement .wrapper div.green { background: green; }
.ReactDnDElement .wrapper div.blue { background: blue; }
.ReactDnDElement .wrapper div.yellow { background: yellow; }
.ReactDnDElement .wrapper div.magenta { background: magenta; }

var ReactDnDElement = React.createClass({
    render: function() {
      return (
        <div className="ReactDnDElement">
          <div className="transform">
            {this.props.connectDragSource(
              <div className="wrapper">
                <div className="green"></div>
                <div className="blue"></div>
                <div className="yellow"></div>
                <div className="magenta"></div>
              </div>
            )}
          </div>
        </div>
      );
    }
});

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

screen shot 2015-09-17 at 17 48 31

للأسف هذا أفضل ما يمكنني اقتراحه. إذا كانت هذه مشكلة كبيرة بالنسبة لك ، فالرجاء التفكير في استخدام React DnD backend بدلاً من HTML5: على سبيل المثال ، خلفية الماوس كما في # 70 ، والتي لن تواجه هذه المشكلة لأنها لن تعتمد على setDragImage . خيار آخر هو الاستمرار في استخدام الواجهة الخلفية لـ HTML5 ، ولكن استخدم طبقة سحب مخصصة لا تعتمد على setDragImage .

gaearon في ١٧ سبتمبر ٢٠١٥

مهلا! شكرا لإلقاء نظرة على هذا. نعم الاشياء السيئة حقا! حسنًا ، آمل أن يقوم المتصفح بإصلاح هذه المشكلة قريبًا ..

delijah في ٢٣ سبتمبر ٢٠١٥