React-dnd: मॉनिटर.इसड्रैगिंग () कभी-कभी झूठी वापसी करता है जब इसे सच होना चाहिए

को निर्मित 9 जुल॰ 2015 · 12टिप्पणियाँ · स्रोत: react-dnd/react-dnd

दो या दो से अधिक इंटरऑपरेबल सॉर्ट करने योग्य सूचियों का उपयोग करते समय, Monitor.isDragging() कभी-कभी झूठा रिटर्न देता है, जब किसी आइटम को एक कंटेनर से दूसरे कंटेनर में खींचते समय इसे सही होना चाहिए।

सेटअप: सरल सॉर्ट करने योग्य डेमो से शुरू होकर, एक और कंटेनर और सॉर्ट करने योग्य ऑब्जेक्ट का सेट जोड़ें। कार्ड एक कंटेनर से दूसरे कंटेनर में खींचे जाने योग्य होने चाहिए, उनके अपने कंटेनर में छांटे जा सकते हैं और एक कंटेनर से दूसरे कंटेनर में खींचे जाने पर उन्हें छांटने योग्य होना चाहिए।

कार्ड को एक कंटेनर से दूसरे कंटेनर में ले जाने पर समस्या उत्पन्न होती है। कार्ड घटक अस्पष्टता निर्धारित करने के लिए isDragging प्रॉपर्टी (ड्रैगसोर्स डेकोरेटर द्वारा इंजेक्शन) पर निर्भर करता है, हालांकि, जब आइटम को एक कंटेनर से दूसरे कंटेनर में खींचा जाता है, तो वैश्विक मॉनीटर स्रोत आईडी को बदल देता है जो अब ड्रैग किए गए घटक से मेल नहीं खाता है और वापस लौटता है कॉल करने के लिए झूठा isDraging जब यह सच होना चाहिए।

चूंकि ड्रैगसोर्स को पहले से ही प्रति ड्रैग करने योग्य ऑब्जेक्ट के लिए एक सुसंगत विश्व स्तर पर अद्वितीय कुंजी की आवश्यकता होती है (यदि आपके ड्रैग करने योग्य घटक की कुंजियाँ किसी भी समय बदल जाती हैं तो अन्य सामान वास्तव में गलत व्यवहार करता है), क्या स्रोत को निर्दिष्ट करते समय कोड उस कुंजी का उपयोग कर सकता है ताकि एक कंटेनर से खींचना सही ढंग से काम करे?

अगर आपको उदाहरण कोड देखने की जरूरत है तो मुझे बताएं। इस मुद्दे को प्रदर्शित करने वाला मेरा कोड सरल सॉर्ट करने योग्य डेमो पर आधारित है।

स्रोत

amoenk

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

isDragging लिए घटक ट्री में काम करने के लिए, कृपया अपने ड्रैग सोर्स पर मैन्युअल रूप से isDragging लागू करें।

const ingredientSource = {
    beginDrag(props) {
        return { ingredient: props.ingredient };
    },
    isDragging(props, monitor) {
        return props.ingredient === monitor.getItem().ingredient;
    }
};

DragSource दस्तावेज़ देखें :

isDragging(props, monitor) : वैकल्पिक। डिफ़ॉल्ट रूप से, ड्रैग ऑपरेशन शुरू करने वाले केवल ड्रैग सोर्स को ड्रैगिंग माना जाता है। आप एक कस्टम isDragging पद्धति को परिभाषित करके इस व्यवहार को ओवरराइड कर सकते हैं। यह props.id === monitor.getItem().id जैसा कुछ लौटा सकता है। ऐसा तब करें जब मूल घटक को खींचने के दौरान अनमाउंट किया जा सकता है और बाद में एक अलग माता-पिता के साथ "पुनरुत्थान" किया जा सकता है। उदाहरण के लिए, जब एक कार्ड को कानबन बोर्ड में सूचियों में ले जाया जाता है, तो आप चाहते हैं कि यह खींची गई उपस्थिति को बनाए रखे-भले ही तकनीकी रूप से, घटक अनमाउंट हो जाता है और हर बार जब आप इसे किसी अन्य सूची में ले जाते हैं तो एक अलग माउंट हो जाता है। _नोट: आप इस पद्धति के अंदर monitor.isDragging() को कॉल नहीं कर सकते हैं।_

क्या यह मदद करता है?

gaearon 12 जुल॰ 2015

👍24 ❤9

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

@amoenk हां, हमें आपकी सहायता के लिए उदाहरण कोड की आवश्यकता होगी।

vkbansal 10 जुल॰ 2015

आपकी सहायताके लिए धन्यवाद! यहां काम करने का उदाहरण दिया गया है: http://notlouieagain.com/~amoenk/dnd/

और यह लिंक अनबंडल कोड ब्राउज़ करने के लिए: http://notlouieagain.com/~amoenk/dnd/js/

ओह, जब मैं डिबगिंग कर रहा था, तब भी मैंने मूल सरल सॉर्ट करने योग्य डेमो कोड शामिल किया था, लेकिन महत्वपूर्ण घटक संघटक और संघटक समूह हैं।

amoenk 10 जुल॰ 2015

मैंने आपके कोड पर एक नज़र डाली और मुझे DnDStudy घटक नहीं मिल रहा है। क्या आप मुझे अपना पूरा कोड दिखा सकते हैं और केवल आपका। आप डेमो कोड हटा सकते हैं।

vkbansal 11 जुल॰ 2015

डेमो कोड हटा दिया गया, DnDStudy घटक यहां एक पृष्ठ घटक है: http://notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

amoenk 11 जुल॰ 2015

ठीक है, मैंने देखा और मुझे विश्वास है कि IngredientGroup अंदर DnDStudy चाबियों के कारण यह एक समस्या हो सकती है। सरणी की अनुक्रमणिका पर भरोसा करने के बजाय, Ingredient अंदर IngredientGroup समान कुछ अद्वितीय आईडी का उपयोग करने का प्रयास करें।

vkbansal 11 जुल॰ 2015

कोड अपडेट किया गया, लेकिन अभी भी वही समस्या है।

amoenk 11 जुल॰ 2015

ठीक। मैं तब गलत था।

@gaearon क्या आप मदद कर सकते हैं?

vkbansal 11 जुल॰ 2015

const ingredientSource = {
    beginDrag(props) {
        return { ingredient: props.ingredient };
    },
    isDragging(props, monitor) {
        return props.ingredient === monitor.getItem().ingredient;
    }
};

DragSource दस्तावेज़ देखें :

isDragging(props, monitor) : वैकल्पिक। डिफ़ॉल्ट रूप से, ड्रैग ऑपरेशन शुरू करने वाले केवल ड्रैग सोर्स को ड्रैगिंग माना जाता है। आप एक कस्टम isDragging पद्धति को परिभाषित करके इस व्यवहार को ओवरराइड कर सकते हैं। यह props.id === monitor.getItem().id जैसा कुछ लौटा सकता है। ऐसा तब करें जब मूल घटक को खींचने के दौरान अनमाउंट किया जा सकता है और बाद में एक अलग माता-पिता के साथ "पुनरुत्थान" किया जा सकता है। उदाहरण के लिए, जब एक कार्ड को कानबन बोर्ड में सूचियों में ले जाया जाता है, तो आप चाहते हैं कि यह खींची गई उपस्थिति को बनाए रखे-भले ही तकनीकी रूप से, घटक अनमाउंट हो जाता है और हर बार जब आप इसे किसी अन्य सूची में ले जाते हैं तो एक अलग माउंट हो जाता है। _नोट: आप इस पद्धति के अंदर monitor.isDragging() को कॉल नहीं कर सकते हैं।_

क्या यह मदद करता है?

gaearon 12 जुल॰ 2015

👍24 ❤9

अच्छी तरह से काम! डॉक्स में याद किया होगा।

आपकी सभी मदद का धन्यवाद! मैं टिकट बंद कर दूंगा।

amoenk 12 जुल॰ 2015

कोई दिक्कत नहीं है। मदद करने में खुशी होगी।

gaearon 12 जुल॰ 2015

हाँ! http://notlouieagain.com/ के लिंक प्रतिसाद नहीं दे रहे हैं ...

maasha 13 जन॰ 2018

😕3

मुझे अपने मुद्दे का मूल कारण मिला। मुझे अपने DropTargets और DragSources को लपेटने के लिए DragDropContextProvider का उपयोग करना बंद करना पड़ा। नीचे उदाहरण देखें।
http://react-dnd.github.io/react-dnd/docs-drag-drop-context-provider.html

export default class YourApp {
    render() {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                /* ... */
            </DragDropContextProvider>
        )
    }
}

इसके बजाय, मुझे अपनी पूरी कक्षा को नीचे की तरह लपेटने के लिए ड्रैगड्रॉपकॉन्टेक्स्ट का उपयोग करना पड़ा।
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

class YourApp {
    /* ... */
}
export default DragDropContext(HTML5Backend)(YourApp)

इसने मेरे लिए समस्या को तुरंत ठीक कर दिया।

shahzore-qureshi 2 अग॰ 2018

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

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

React-dnd: मॉनिटर.इसड्रैगिंग () कभी-कभी झूठी वापसी करता है जब इसे सच होना चाहिए

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

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

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