React-dnd: ड्रैग पर कोई ऑटो-स्क्रॉल नहीं

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

प्रजनन करना :
कृपया सफारी या फ़ायरफ़ॉक्स (शायद आईई) पर उदाहरण पृष्ठ खोलें: https://gaearon.github.io/react-dnd/examples-sortable-simple.html
और ब्राउज़र का आकार बदलें स्क्रीन के बाहर सूची के कुछ तत्वों को रखें, फिर खींचने का प्रयास करें, पृष्ठ को ड्रैग के दौरान स्क्रॉल करना चाहिए लेकिन नहीं। (क्रोम में सही ढंग से काम करता है)
यह समस्या फ़ायरफ़ॉक्स में खुली है।
आप संबंधित स्टैक ओवरफ़्लो प्रश्न की जांच करना चाह सकते हैं।
http://stackoverflow.com/questions/16822920/scroll- while-using-html5-drag-and-drop

समाधान के रूप में:
कृपया चेकआउट करें https://github.com/martindrapeau/jQueryDndPageScroll/blob/master/jquery.dnd_page_scroll.js

साथ ही काम कर रहे उदाहरण
https://jsfiddle.net/0vv7fs63/2/

मैं jQuery प्लगइन का उपयोग करने का सुझाव नहीं दे रहा हूं लेकिन स्रोत कोड की जांच कर रहा हूं।
बस दो div (पृष्ठ के ऊपर और नीचे) जोड़ना और ड्रैग ओवर/इवेंट दर्ज करना सुनना, और तदनुसार स्क्रॉल करना समाधान है।

wontfix

स्रोत

firatsarlar

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

ऐसा लगता है कि प्रतिक्रिया-डीएनडी-स्क्रॉलज़ोन अब नवीनतम प्रतिक्रिया-डीएनडी के साथ काम नहीं करता है। आईएमओ ड्रैग स्क्रॉलिंग प्रतिक्रिया-डीएनडी कोर का हिस्सा होना चाहिए।

AndrewMorsillo 21 जून 2018

👍35 ❤7

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

प्रतिक्रिया-डीएनडी का यह समाधान है: https://github.com/azuqua/react-dnd-scrollzone
शायद इस मुद्दे को अब बंद किया जा सकता है @darthtrevino

nossila 15 मई 2017

🎉5

कृपया सॉर्ट करने योग्य डेवलपर्स, इसका कुछ समाधान प्रदान करें।

varora1406 6 जुल॰ 2017

इसका उपयोग कैसे करें क्या आप मुझे ढूंढ सकते हैं? @nossila

AsceticBoy 13 दिस॰ 2017

@AsceticBoy मैं इसके README से बेहतर काम नहीं कर सकता, इसके कई उदाहरण हैं

nossila 13 दिस॰ 2017

मैंने इसका अपना कार्यान्वयन किया। मूल रूप से सूची कंटेनर को ड्रॉप लक्ष्य के रूप में जोड़ा गया।

प्रयुक्त: findDOMNode(component).getBoundingClientRect()
यह जानने के लिए कि मैं सूची कंटेनर के दोनों ओर कब था

तब: listContainerDOMNode.scrollLeft += someValue
सूची को स्क्रॉल करने के लिए, जो सूची कंटेनर को स्क्रॉल करता है।

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

क्या किसी ने इसे हल किया है, जब सूचक अभी भी सूची कंटेनर स्क्रॉल कर रहा है?

Tsourdox 20 दिस॰ 2017

@nossila ty! प्रतिक्रिया-डीएनडी-स्क्रॉलज़ोन आकर्षण के रूप में काम करता है :)

yankopetrov 24 दिस॰ 2017

मुझे पता है कि यह एक पुराना धागा है लेकिन अभी भी खुला है ...

क्या किसी ने सफलतापूर्वक react-dnd-scrollzone को WindowScroller react-virtualized से टंडेम में सफलतापूर्वक सेटअप किया है। और यदि हां, तो क्या आप कार्यान्वयन साझा कर सकते हैं।

मैं WindowScroller , AutoSizer और List संयोजन का उपयोग कर रहा हूं; और scrollzone ठीक से काम नहीं कर पा रहे हैं।

tysonnero 10 मई 2018

मुझे एहसास हुआ कि मेरी समस्या यह है कि मैं एक कस्टम का उपयोग कर रहा है कि scrollElement के साथ WindowScroller , जहां react-dnd-scrollzone सेट यह तत्व यह लपेटता के रूप में कंटेनर। मैं इसे एक कस्टम स्क्रॉल तत्व प्रोप जोड़ने के लिए फोर्क कर रहा हूं।

tysonnero 10 मई 2018

AndrewMorsillo 21 जून 2018

👍35 ❤7

नीचे मेरा समाधान है:

const autoScrollInSafari = (step = 4) => (fn) => {
  const inSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (inSafari) {
    return function (p, m, c) {
      const scrollDOM = document.querySelector('.your-scroll-dom-class');
      if (scrollDOM) {
        const cursor = m.getClientOffset();
        const rect = scrollDOM.getBoundingClientRect();
        if (cursor.y - rect.top < 50) scrollDOM.scrollTop -= step;
        if (rect.bottom - cursor.y < 50) scrollDOM.scrollTop += step;
        if (cursor.x - rect.left < 50) scrollDOM.scrollLeft -= step;
        if (rect.right - cursor.x < 50) scrollDOM.scrollLeft += step;
      }
      fn.apply(this, [p, m, c]);
    };
  }

  return fn;
};

const myDropSpec = {
  drop() {
    // your drop callback
  },
  hover: autoScrollInSafari((props, monitor, component) => {
    // your hover callback
  }),
}

उममीद है कि इससे मदद मिलेगी। :मुस्कुराओ:

Justin-ZS 30 जुल॰ 2018

❤1 🎉1 👍1

स्क्रॉलज़ोन का एक अद्यतन कांटा (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) 7.0.2 तक और सहित प्रतिक्रिया-डीएनडी के अधिक आधुनिक संस्करणों के साथ काम करता है। उस संस्करण से परे, प्रतिक्रिया-डीएनडी ने इस त्रुटि को उत्पन्न करने वाले ड्रैगड्रॉपकॉन्टेक्स्ट को स्थानांतरित कर दिया।

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

Soundvessel 11 मार्च 2019

@Soundvessel जो react-dnd/lib/cjs/DragDropContext पा सकते हैं या आप इसे react-dnd के शीर्ष-स्तर से आयात कर सकते हैं

darthtrevino 11 मार्च 2019

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

stale[bot] 6 जुल॰ 2019

क्या किसी को प्रतिक्रिया-डीएनडी के नवीनतम संस्करण के साथ काम करने का समाधान मिला?

andrefox333 14 अग॰ 2019

👍2

स्क्रॉलज़ोन का एक अद्यतन कांटा (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) 7.0.2 तक और सहित प्रतिक्रिया-डीएनडी के अधिक आधुनिक संस्करणों के साथ काम करता है। उस संस्करण से परे, प्रतिक्रिया-डीएनडी ने इस त्रुटि को उत्पन्न करने वाले ड्रैगड्रॉपकॉन्टेक्स्ट को स्थानांतरित कर दिया।
./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

@Soundvessel क्या आपने सुझाए गए @darthtrevino को ठीक किया था?

orlandovallejos 11 नव॰ 2019

चूंकि मुझे बॉक्स से बाहर कोई समाधान नहीं मिला, और कुछ समाधान नवीनतम प्रतिक्रिया-डीएनडी संस्करण के साथ काम नहीं करते हैं, इसलिए मैं स्वयं एक समाधान के साथ आया: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

मुझे आशा है कि यह किसी और की मदद करता है।

orlandovallejos 12 नव॰ 2019

❤2 👍1

@orlandovallejos
हैलो, क्या इसे इस तरह के तनाव परीक्षण उदाहरण पर लागू किया जा सकता है? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

मैंने थोड़ी बहुत कोशिश की लेकिन कोई सफलता नहीं मिली।

MartinN3 15 नव॰ 2019

@MartinN3 यहाँ आपके पास मेरा दोस्त है: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

आपको इसे अपनी आवश्यकताओं, ऑफसेट, डिव कंटेनर (शायद 1 से अधिक), स्क्रॉलिंग गति (PX_DIFF चर का उपयोग करके) आदि के लिए अपडेट करना होगा।

याद रखें कि स्क्रॉलिंग फीचर क्रोम में बॉक्स से बाहर काम करता है।

orlandovallejos 18 नव॰ 2019

❤4

चूंकि मुझे बॉक्स से बाहर कोई समाधान नहीं मिला, और कुछ समाधान नवीनतम प्रतिक्रिया-डीएनडी संस्करण के साथ काम नहीं करते हैं, इसलिए मैं स्वयं एक समाधान के साथ आया: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489
मुझे आशा है कि यह किसी और की मदद करता है।

यह सबसे अच्छा उपाय है। समाधान के लिए बहुत बहुत धन्यवाद :)

alqamabinsadiq 18 जन॰ 2020

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

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

React-dnd: ड्रैग पर कोई ऑटो-स्क्रॉल नहीं

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

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

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