React-dnd: चाइल्ड नोड्स पर ट्रांसलेशन 3 डी का उपयोग करते समय ड्रैगप्रिव्यू गलत है

को निर्मित 19 अग॰ 2015 · 5टिप्पणियाँ · स्रोत: react-dnd/react-dnd

अरे!

हम एक तत्व को खींचने योग्य बनाने की कोशिश करते हैं, जिसमें कुछ बिंदु पर एक ट्रांसलेशन 3 डी सीएसएस शैली होती है। दुर्भाग्य से यह पूरी ड्रैग-लेयर को रिपोजिशन करता है। मुझे वास्तव में यह समझ में नहीं आ रहा है कि चूंकि ट्रांसप्ल 3 डी रूट एलिमेंट पर नहीं है, बल्कि इसके एक बच्चे के नोड पर है।

मैंने एक बहुत ही सरल उदाहरण इकट्ठा किया, जो आपको समस्या दिखा रहा है। (इसे काम करने के लिए, आपको 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 व्यवहार के शीर्ष पर मानकीकृत है, और उम्र के लिए टूट गया है और असंगत है। जैसा कि वेब अधिक जटिल हो जाता है, मुझे संदेह है कि यह केवल खराब हो जाएगा, बेहतर नहीं। कस्टम माउस और टच हैंडलिंग एक बेहतर उपाय है और मैं इस तरह के रिएक्ट डीएनडी बैकएंड के लिए तत्पर हूं।

gaearon 24 सित॰ 2015

👍2

सभी 5 टिप्पणियाँ

ऐसा लगता है कि देशी html5 ड्रैग और ड्रॉप फंक्शनलिटी के साथ भी एक समस्या है। अगर मैं देशी html5 ड्रैग और ड्रॉप मेथड के साथ भी यही कोशिश करता हूं, तो यह फायरफॉक्स और सफारी के लिए सही तरीके से काम करता है, लेकिन क्रोम और ओपेरा के लिए नहीं।

प्रतिक्रिया-बिंदु के साथ यह समस्या सफारी में मौजूद नहीं है, लेकिन क्रोम, ओपेरा और FIREFOX के लिए है।

मैंने क्रोमियम के लिए एक मुद्दा खोला है: https://code.google.com/p/chromium/issues/detail?id=525604

delijah 26 अग॰ 2015

इस बग को ठीक करने का कोई इरादा?

delijah 8 सित॰ 2015

बुरा सामान। मैंने इस पर सिर्फ दो घंटे बिताए और मुझे नहीं पता कि इसे कैसे काम करना है।

यह उन भयानक ब्राउज़र विसंगतियों में से एक जैसा लगता है। समान x और y मान dataTransfer.setDragImage किए गए ब्राउज़र द्वारा व्याख्या की जाती है जब आपके द्वारा इंटरेक्ट किए गए तत्व का कोई भी बच्चा अपने माता-पिता के लिए नकारात्मक ऑफसेट के साथ स्थित होता है। ध्यान दें कि एक सकारात्मक एक में परिवर्तन कैसे जादुई रूप से काम करता है।

कारण यह है कि आप इस समस्या को कुछ वेनिला एचटीएमएल 5 पर नहीं देखते हैं और फ़ायरफ़ॉक्स में उदाहरणों को छोड़ देते हैं, क्योंकि वे x और y निर्दिष्ट नहीं करते हैं, और डिफ़ॉल्ट मान केवल "काम" के लिए निकलते हैं ”। हालाँकि हम _need_ उन्हें ज्यादातर मामलों में सही जगह पर दिखाई देने वाली घसीट आइटम के लिए निर्दिष्ट करने के लिए।

मुझे संदेह है कि यहां कोई भी संभव समाधान है। जब ड्रैग सोर्स नोड के किसी भी गहरे नेस्टेड बच्चे बाईं या ऊपरी किनारे की सीमा से बाहर होते हैं, तो कुछ ब्राउज़रों में setDragImage(node, x, y) सही ढंग से काम करना बंद कर देता है। फिर भी, भले ही हमने इसे कुछ ब्राउज़रों के लिए ठीक करने का प्रयास किया, हम निश्चित रूप से इसे अन्य ब्राउज़रों में तोड़ देंगे, इसलिए मुझे नहीं लगता कि हम इसे ठीक कर सकते हैं।

मैं बंद कर रहा हूं, लेकिन वर्कअराउंड के लिए स्वतंत्र महसूस कर रहा हूं! अभी के लिए, मेरा सुझाव है कि ड्रैग स्रोतों के अंदर नकारात्मक परिवर्तनों से बचें। ध्यान दें कि आप connectDragSource _inside_ को रूपांतरित आवरण में स्थानांतरित कर सकते हैं:

.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

दुर्भाग्य से यह सबसे अच्छा सुझाव है। यदि यह आपके लिए एक बड़ा मुद्दा है, तो कृपया HTML5 के बजाय एक वैकल्पिक रिएक्ट डीएनडी बैकएंड का उपयोग करने पर विचार करें: उदाहरण के लिए, # 70 में एक माउस बैकएंड, जैसे कि यह समस्या नहीं होगी क्योंकि यह setDragImage पर निर्भर नहीं होगा एक कस्टम ड्रैग लेयर का उपयोग करें जो setDragImage पर निर्भर नहीं करता है।

gaearon 17 सित॰ 2015

अरे! इस पर एक नज़र रखने के लिए धन्यवाद। हाँ गंदा सामान! वैसे मुझे उम्मीद है कि ब्राउज़र लोग इस मुद्दे को जल्द ही ठीक कर देंगे ..

delijah 23 सित॰ 2015

वैसे मुझे उम्मीद है कि ब्राउज़र लोग इस मुद्दे को जल्द ही ठीक कर देंगे ..

gaearon 24 सित॰ 2015

👍2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-dnd: चाइल्ड नोड्स पर ट्रांसलेशन 3 डी का उपयोग करते समय ड्रैगप्रिव्यू गलत है

सबसे उपयोगी टिप्पणी

सभी 5 टिप्पणियाँ

संबंधित मुद्दों