मुझे विपरीत समस्या थी। ड्रॉपडोज़न के साथ HTML5 बैकएंड काम करने के लिए, मुझे करना था:

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

तथा

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

मेरा ड्रॉपज़ोन शरीर पर चढ़ा हुआ है और आप इसे माउंट करने के क्रम से खेलना चाहते हैं।
मुझे लगता है कि इसे बॉडी-वाइड बनाने और फिर आपके द्वारा फ़ाइल ड्रॉप करने के आधार पर कार्रवाई करना अगर आपके लिए कुछ और काम करने का तरीका हो सकता है।

मैं एक ऐसे मुद्दे पर भी भाग गया, जहां ड्रैग करने योग्य आइटम में <input> , और यदि उपयोगकर्ता इसके अंदर / ड्रग्स का चयन करता है, तो यह आइटम को ड्रग कर देता है। यदि इनपुट पर ध्यान दिया जाए तो मैं शायद false canDrag वापस कर सकता हूं, और यही करना चाहिए।

हालांकि HTML खींचें / ड्रॉप अपलोड के साथ हस्तक्षेप करने के तरीके का पता नहीं है। मेरे पास पहले से ही यह पूरे लेआउट पर सक्षम है। @ बेयरियन , विचार?

@ffxsam क्या यह अभी भी आपके लिए एक मुद्दा है?

मुझे नहीं पता। मुझे इस मुद्दे के कारण इसे अनइंस्टॉल करना पड़ा, इसलिए मैं आपको बता नहीं सकता कि क्या यह अभी भी एक मुद्दा है - क्षमा करें! आप चाहें तो इस मुद्दे को बंद कर सकते हैं।

नमस्ते, मैं बस एक ही समस्या को चलाता हूं, मैं एक मुद्दे को खोलने वाला था, लेकिन मुझे लगता है कि यह पहले से ही खुला है।
तो बात यह है कि जहाँ भी आप ReactDnD को इंस्टेंट करते हैं, वहां पर देशी ऑनड्रॉप इवेंट काम करना बंद कर देता है।
मेरे पास एक ही उपयोग का मामला है, पूरा शरीर एक 'ड्रॉपज़ोन' है जो हमेशा एक फ़ाइल को अंदर खींचने के लिए सुनता है, मैं बस उस घटक के लिए मूल घटनाओं का उपयोग कर रहा हूं क्योंकि बहुत सरल कार्यक्षमता है और बॉक्स से बाहर आता है। लेकिन मेरे विचार में रिएक्टडीडीडी काम कर रहा है, ड्रॉप ईवेंट को निकाल नहीं दिया गया है, और मजेदार कारण है कि यह ऑनग्रैगनेट या ऑनड्रैगस्टार्ट घटना को अधिलेखित नहीं करता है।
कोई सुराग @kesne @gaearon ? मैं वास्तव में ReactDnD की स्थापना रद्द नहीं करना चाहता, यह रिएक्ट के लिए अब तक का सबसे अच्छा ड्रैग एंड ड्रॉप निर्भरता है।

@kesne @gaearon मैं हूं । मैं मूल रूप से Wordpress और Wordpress मीडिया अपलोडर के साथ DND का उपयोग कर रहा हूँ फ़ाइल अपलोड के लिए देशी ड्रॉप घटनाओं का उपयोग करता है। इसके ऑनड्रॉप कॉलबैक को निकाल नहीं दिया जाता है, केवल जब ऐप में ReactDND का उपयोग किया जाता है। Reactdnd ड्रॉप लक्ष्य को हटाने से समस्या हल हो जाती है। मैंने प्रोजेक्ट पर कई महीने बिताए हैं और रिएक्टड इसका एक मुख्य हिस्सा है और इसका बड़े पैमाने पर इस्तेमाल किया गया है। मैं निश्चित रूप से इस मोड़ पर किसी अन्य पुस्तकालय में जाने का जोखिम नहीं उठा सकता। इस धागे के साथ-साथ स्टैक ओवरफ्लो में इसी तरह की रिपोर्ट से, मैं देखता हूं कि यह मुद्दा काफी समय से है। इस के लिए किसी भी समाधान की बहुत सराहना की जाएगी।

हाँ, यह संभावना है कि देशी और कस्टम dnd तत्वों के बीच कुछ खराब सहभागिता है। मेरे पास इस मुद्दे पर विचार करने के लिए एक टन का समय नहीं है, लेकिन मैं इस परियोजना के लिए कुछ समय निर्धारित करने की योजना बना रहा हूं, और यह मेरे द्वारा देखे जाने वाले पहले मुद्दों में से एक होगा।

यदि आप सक्षम हैं, तो प्रजनन उदाहरण के साथ न्यूनतम रेपो सेटअप प्राप्त करना सुपर उपयोगी होगा ताकि हम इसे संभालने का सबसे अच्छा तरीका जानने की कोशिश कर सकें।

@kesne आपकी प्रतिक्रिया के लिए बहुत बहुत धन्यवाद और यह जानना अच्छा लगता है कि आप इस मुद्दे पर गौर करेंगे। मैं निश्चित रूप से आपके लिए एक जीवंत उदाहरण बनाऊंगा और जल्द से जल्द यहां एक लिंक पोस्ट करूंगा।
इस बीच मुझे लगता है कि एक अस्थायी हैक किया गया है, अभी तक पूरी तरह से इसका परीक्षण नहीं किया है, लेकिन अभी के लिए चाल करने के लिए लगता है। मैंने देखा कि HTML5Backend में सेटअप () और टियरडाउन () फ़ंक्शन थे, जो सभी ईवेंट श्रोताओं को विंडो एलिमेंट के लिए बाध्य कर रहे थे। मेरे मामले में वर्डप्रेस फाइल अपलोडर एक मोडल बॉक्स है, जो पूरी स्क्रीन को घेरे रहता है और इसलिए मोडल के खुले होने पर कोई भी रिएक्टडीएनडी तत्व नहीं खींचे या गिराए जा सकते हैं। इसलिए मोडल विंडो के ओपन इवेंट के दौरान मैं बैकएंड के इंस्टॉलेशन (ड्रैगड्रॉपमैन के माध्यम से उपलब्ध) पर टर्डडाउन () फ़ंक्शन को कॉल करता हूं और मोडल के बंद होने के दौरान, मैं सेटअप () फ़ंक्शन को कॉल करता हूं। यह ठीक काम करने लगता है, लेकिन क्या आप मुझे बता सकते हैं कि क्या कॉल फाड़ और सेटअप फ़ंक्शंस फिर से मौजूदा या नए प्रदान किए गए घटकों पर ReactDND के साथ किसी अन्य समस्या का कारण बन सकते हैं?

यह मुद्दा है: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9f7a7c87df/src/HTML5Backend.js#L452

कोड की टिप्पणी के आधार पर, "एक अच्छा कर्सर न दिखाएं", ऐसा लगता है कि यह e.dataTransfer.dropEffect को केवल प्रदर्शन संपत्ति मानता है। लेकिन, dropEffect को none वास्तव में फ़ाइलों को एक साथ छोड़ने से रोकने के लिए लगता है। यह ध्यान देने योग्य है कि इसे move , copy , या link काम करना ठीक है। यह Chrome 55.0.2 में है।

हम वास्तव में सभी के साथ-साथ प्रतिक्रिया के बाहर इसे दोहरा सकते हैं। मैंने एक फिडेल बनाया है जो इस मुद्दे को अलग करता है: https://jsfiddle.net/ypr6os00/8/

DropEffect के लिए MDN लेख से लगता है कि effectAllowed कार्यात्मक है, जबकि dropEffect प्रेजेंटेशनल होना चाहिए । फिडेल खुद के लिए बोलता है, हालांकि ...

संपादित करें: यह https://github.com/gaearon/react-dnd-html5-backend/sues/25 के रूप में एक ही मुद्दा है

मैं इस बात की पुष्टि कर सकता हूं कि मेरे मामले में, केवल e.dataTransfer.dropEffect = 'none'; (https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58aad1a9fde2fca3fca3fca9115a7c87df/src/ack-5-5/ ) मेरे ड्रॉपज़ोन ड्रॉप इवेंट्स के साथ प्रतिक्रिया-डंड के हस्तक्षेप के मेरे मुद्दे को तय किया।

संदर्भ के लिए, मेरे पास निम्नलिखित के समान एक सेटअप है:

<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 ।

[संपादित करें]
जब तक यह समस्या किसी के लिए मुख्य परियोजना में हल नहीं हो जाती, तब तक मैंने एक गिथब फोर्क और एक एनपीएम पैकेज बनाया।

वर्कअराउंड के लिए धन्यवाद

मैं नेस्टेड dropzones के लिए प्रतिक्रिया- dropzone उदाहरण का उपयोग करके टी हैट पाया। यह प्रचार बंद कर देता है, जो मुझे लगता है कि समस्या है। जब तक मुझे यह मुद्दा नहीं मिला, तब तक यह मेरा काम था

मैं इसी मुद्दे का सामना कर रहा हूँ। नेस्टेड ड्रॉपज़ोन के विचार को देखते हुए, मैंने एक div के अंदर अपने जो कुछ भी अपलोड करने वाले घटक को लपेट कर समाप्त कर दिया और onDragOver प्रॉपर्टी को उस div में जोड़ा, जो सिर्फ प्रचार को रोकती है। ऐसा लगता है कि यह मेरे मामले में काम कर रहा है, यहाँ उदाहरण है (मैं फाइलपॉन्ड का उपयोग कर रहा था):

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

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

हालाँकि, इस विचार को पसंद नहीं करते हैं कि प्रतिक्रिया-dnd इसे अन्य घटकों पर डी एंड डी कार्यक्षमता पर बहुत हस्तक्षेप कर सकता है। यह एक विशाल दुर्घटना की तरह प्रतीत होता है, जहाँ कुछ घटक प्रतिक्रिया-dnd से d & d DOM-nodes का उपयोग करते हुए दूसरे घटक में d & d फ़ाइल छोड़ने की कार्यक्षमता को तोड़ सकते हैं। लाइब्रेरी में इसे ठीक करने के लिए +1

हो सकता है कि कुछ त्वरित समाधान हो सकता है, कि ड्रॉपऑफेक्ट को किसी तरह से कुछ प्रोपर चेन के माध्यम से निर्दिष्ट किया जा सकता है?

मैंने HTML5 बैकएंड के लिए @silvainSayduck फोर्क का उपयोग करके समाप्त किया। इससे मेरा काम बनता है। अफ़सोस की बात है कि यह बग सीधे रिएक्ट-डैंड में तय नहीं किया गया है, लेकिन कम से कम एक वर्कअराउंड है

वहाँ के किसी भी मौका जल्द ही इसके लिए एक तय किया जा रहा है? @silvainSayduck क्या आप अपने फिक्स के लिए एक पुल अनुरोध खोल सकते हैं?

मैंने अपने रेपो से एक पुल अनुरोध बनाया, यह सुनिश्चित नहीं कि यह बहुत मदद करता है (जैसा कि मुझे अभी भी पता नहीं है अगर टिप्पणी करते हैं कि एक पंक्ति का कोई अवांछित दुष्प्रभाव है, या भले ही यह सभी उपयोग के मामलों के लिए समस्या को ठीक करता है)।

1239

@darthtrevino क्या आप इस परियोजना में योगदानकर्ता के रूप में

पीआर पर एक नज़र डालते हुए, यह उचित लगता है कि मुझे यह सत्यापित करने की आवश्यकता होगी कि यह उदाहरणों के साथ पेंच नहीं करता है

# 1240 में मिला दिया गया

बहुत बहुत धन्यवाद @darthtrevino! यह npm संस्करण में कब जारी किया जाएगा?

दिन के अंत तक - जब मुझे इस परियोजना के लिए समय मिलता है, मेरा सामान्य वर्कफ़्लो पीआरएस के बैच के माध्यम से काम करना है और फिर एक रिलीज में कटौती करना है।

@darthtrevino क्या यह वर्तमान रिलीज़ में उपलब्ध है? जब यह उपलब्ध होने जा रहा है?

मेरा मानना ​​है कि यह वर्तमान रिलीज़ में है, हाँ। यदि आप समस्याओं में भाग लेते हैं तो मुझे बताएं

@darthtrevino धन्यवाद, यह उपलब्ध है।

मैं इसी मुद्दे का सामना कर रहा हूँ। नेस्टेड ड्रॉपज़ोन के विचार को देखते हुए, मैंने एक div के अंदर अपने जो कुछ भी अपलोड करने वाले घटक को लपेट कर समाप्त कर दिया और onDragOver प्रॉपर्टी को उस div में जोड़ा, जो सिर्फ प्रचार को रोकती है। ऐसा लगता है कि यह मेरे मामले में काम कर रहा है, यहाँ उदाहरण है (मैं फाइलपॉन्ड का उपयोग कर रहा था):

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

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

हालाँकि, इस विचार को पसंद नहीं करते हैं कि प्रतिक्रिया-dnd इसे अन्य घटकों पर डी एंड डी कार्यक्षमता पर बहुत हस्तक्षेप कर सकता है। यह एक विशाल दुर्घटना की तरह प्रतीत होता है, जहाँ कुछ घटक प्रतिक्रिया-dnd से d & d DOM-nodes का उपयोग करते हुए दूसरे घटक में d & d फ़ाइल छोड़ने की कार्यक्षमता को तोड़ सकते हैं। लाइब्रेरी में इसे ठीक करने के लिए +1

हो सकता है कि कुछ त्वरित समाधान हो सकता है, कि ड्रॉपऑफेक्ट को किसी तरह से कुछ प्रोपर चेन के माध्यम से निर्दिष्ट किया जा सकता है?

जोड़ें event.stopPropagation() हैंडल पर #DragOver [Dropzone] मेरे मामले में समस्या को हल करता है। साभार @vileppanen

इस धागे ने मेरी जान बचाई

इस मुद्दे का अनुभव करने वालों के लिए जहां <Dropzone /> react-dnd घटक के अंदर है, वही समाधान काम करता है - <Dropzone /> को <div onDragOver={e=> e.stopPropagation() /> onDragOver साथ लपेटकर प्रसार को रोकने के लिए इस्तेमाल किया।